Rick & morty API REACT

Question

I am using rick & morty API, and i want to render cards of the result where I display name, gender, location & episode name. But the object returns this.

>  "results": [
        {
            "id": 19,
            "name": "Antenna Rick",
            "status": "unknown",
            "species": "Human",
            "type": "Human with antennae",
            "gender": "Male",
            "origin": {
                "name": "unknown",
                "url": ""
            },
            "location": {
                "name": "unknown",
                "url": ""
            },
            "image": "https://rickandmortyapi.com/api/character/avatar/19.jpeg",
            "episode": [
                "https://rickandmortyapi.com/api/episode/10"
            ],
            "url": "https://rickandmortyapi.com/api/character/19",
            "created": "2017-11-04T22:28:13.756Z"
        }
    ]

Given the episode array, I need to show the name of the episode, not the URL. So what I do in my return is this

<h5>{'Episode: '+getEpisode(item.episode)}</h5>

 const getEpisode = (item) => {
**//REQUEST TO https://rickandmortyapi.com/api/episode/10**
    Requests.getEpisode(item[0]).then((res)=>{
        return res.name
    })
    .catch((err)=>{
        console.log(err)
    })
}

But all I got it's undefined printed in the h5 tag, why is this ? can anybody help me

this is the content of request.getEpisode

  const getEpisode = async (URL) => { 
//URL = https://rickandmortyapi.com/api/character/19
const {data: res} = await axios.get(`${URL}`);
return res;

};

Answer 1

I can't tell what your Requests.getEpisode function does, but if you are using axios like your tags suggest, you could do something like this:

const getEpisode = (item) => {
    axios.get(item[0]).then((res)=>{
        return res.data.name
    })
    .catch((err)=>{
        console.log(err)
    })
}

Depending on what your Requests.getEpisode() function looks like, you might just need to update the getEpisode function that you have in your post to return res.data.name instead of res.name

Update:

Based on the new code OP has shared, I don't think there are any issues with how the request is made. I think the issue is that getEpisode(item.episode) doesn't return anything. To solve this, you could try updating a state variable after your episode is retrieved from the api. Something like this:

import React from "react";
import axios from "axios";

const getEpisode = (item) => {
  return _getEpisode(item[0])
    .then((res) => {
      return res.name;
    })
    .catch((err) => {
      console.log(err);
    });
};

const _getEpisode = async (URL) => {
  const { data: res } = await axios.get(`${URL}`);
  return res;
};

export default function App() {
  const [episode, setEpisode] = React.useState("");

  React.useEffect(() => {
    getEpisode(["https://rickandmortyapi.com/api/episode/10"]).then((res) => {
      setEpisode(res);
    });
  });

  return <h5>{"Episode: " + episode}</h5>;
}

The api data is retrieved in the useEffect hook, and then state is updated so that the episode title displays in your component. You can see it working in this sandbox