Why not showing the return value of the function?

Question

function in console.log I can see the correct results

     const getName = (id) => {

        var name = "";
        axios.get( `http://localhost:3001/students/names/${id}`).then((response) => {

          name = response.data[0].Fname + " " + response.data[0].Lname;
          console.log(name);
        })
        .catch((err) => {
          console.log(err);
        });

        return name;
        
      };

render method

 {results.map((value,key)=>(

                                      <tr key={key}>

                                          <td className='columnData'>
                                              { (getName(value.Student_ID))  }
                                          </td>

Why not showing the return value of the function ?

In addition to the above linked duplicate... *In React* what you're missing here is the concept of *state*. Your asynchronous operation shouldn't *return* the value, it should *update state* with the value. Then the render method just displays whatever the current state is. — David, Dec 13 '22 at 12:37

fsbflavio · Answer 1 · 2022-12-13T12:42:12.610

1

You have to await the Axios get method:

const getName = async (id) => {
  try {
    const response = await axios.get(`http://localhost:3001/students/names/${id}`);
    const name = response.data[0].Fname + " " + response.data[0].Lname;
    return name;
  } catch (err) {
    console.log(err);
    return "";
  }
};

edited Dec 13 '22 at 12:42

answered Dec 13 '22 at 12:40

fsbflavio

664
10
22

How will `getName` be awaited in this case? React render methods can't be `async`. – David Dec 13 '22 at 12:41

score 1 · Accepted Answer · answered Dec 13 '22 at 12:41

this is a async function so if you want to get the name just make a state.

const [name, setName] = useState('')
const getName = (id) => {
        axios.get( `http://localhost:3001/students/names/${id}`).then((response) => {

          setName(response.data[0].Fname + " " + response.data[0].Lname);
          console.log(name);
        })
        .catch((err) => {
          console.log(err);
        });

        return name;
        
      };

then you can use the name where ever you want

Thanks it working. but changing the results continuesly – nadun channa Dec 13 '22 at 12:47 — nadun channa, Dec 13 '22 at 12:47

Why not showing the return value of the function?

2 Answers2