API call in render method in React inside map

Question

I have a userId array and I need to show the list of names related to that array. I want to call API call inside the render method and get the username. But this is not working. How can I fix this issue?

Below is my render method:

render(){
    ...
    return(
        <div>
            {this.state.users.map(userId => {
                return (
                    <div> {this.renderName(userId )} </div>
                )
            })}
        </div>
    )
    ...
}

Below is the renderName function:

renderName = (userId) => {
    axios.get(backendURI.url + '/users/getUserName/' + userId)
         .then(res => <div>{res.data.name}</div>)
}

I returned a hardcoded string. But it also didn't work. API call is working properly — shayanmalinda, Jun 28 '20 at 14:26
@shayanmalinda `axios.get` is a promise, you can't render that. This approach isn't very good practice for React, it will do the API calls every time it's re-rendered. You'd be better off doing the API calls when the component mounts, storing the results in state and then rendering that state. And just show a loading indicator while it's fetching. — Jayce444, Jun 28 '20 at 14:30
Remember that a React component might rerender a bunch of times without you noticing. Rendering is not always the same as changing the DOM. Render is supposed to render UI only, without side effects (except maybe console.log for debugging purposes). — Rodrigo Amaral, Jun 28 '20 at 14:58

score 1 · Answer 1 · answered Jun 28 '20 at 14:30

Generally, you do not change state or fetch data in the render method directly. State is always changed by actions/events (clicks, input or whatever). The render method is called everytime a prop/state changes. If you change the state within the render method directly, you end up having an infinite loop.

You should use the lifecycle methods or hooks to load data from an api. Here's an example from the official React FAQ: https://reactjs.org/docs/faq-ajax.html

score 1 · Accepted Answer · answered Jun 28 '20 at 14:31

1

Basically you cannot use asynchronous calls inside a render because they return a Promise which is not valid JSX. Rather use componentDidMount and setState to update the users array with their names.

answered Jun 28 '20 at 14:31

Lance

701
6
25

Siddharth · Answer 3 · 2020-06-28T14:39:50.470

This will not render anything as the API calls are asynchronous and since renderName function isn't returning anything, it'll return undefined.

You should create a function, which will call api for all the userIds and update in state

getNames = () => {
    const promises = [];
    this.state.users.forEach((userId) => {
        promises.push(axios.get(backendURI.url+'/users/getUserName/'+userId));
    })

    // Once all promises are resolved, update the state
    Promise.all(promises).then((responses) => {
        const names = responses.map((response) => response.data.names);
        this.setState({names});
    })

}

Now you can call this function in either componentDidMount or componentDidUpdate, whenever users data is available.

And finally, you can iterate over names directly and render them

<div>
  {this.state.names.map((name) => {
    return <div> {name} </div>;
  })}
</div>

score 0 · Answer 4 · answered Jun 28 '20 at 14:40

You could make user name it's own component:

const request = (id) =>
  new Promise((resolve) =>
    setTimeout(resolve(`id is:${id}`), 2000)
  );
const UserName = React.memo(function User({ userId }) {
  const [name, setName] = React.useState('');
  React.useEffect(() => {
    //make the request and set local state to the result
    request(userId).then((result) => setName(result));
  }, [userId]);
  return <div> {name} </div>;
});
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [1, 2],
    };
  }
  render() {
    return (
      <ul>
        {this.state.users.map((userId) => (
          <UserName key={userId} userId={userId} />
        ))}
      </ul>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

score 0 · Answer 5 · answered Jun 28 '20 at 15:10

export default ()=> {
  let [users,setUsers] = useState([]);

  useEffect(()=>{
    let fetchUsersInfoRemote = Promise.all([...Array(10)].map(async (_,index)=>{
        try {
          let response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${index+1}`);
          return response.data;
        }
        catch(error) {
          return ;
        }
    }));

    fetchUsersInfoRemote.then(data=> setUsers(data));
  },[]);

  return (
    <div className="App">
      <ul>
        {
          users.map(user=>(<li><pre>{JSON.stringify(user,null,2)}</pre></li>))
        }
      </ul>
    </div>
  );
}

API call in render method in React inside map

5 Answers5

Linked