javascript – Correctly Map API response in react.js

You have the right idea of using .map to render a list of items, but you also need to make sure, that when you do this, that each returned item in the .map function, has a key attribute that must be unique inside the parent node.

If you’re calling data from an api, this will usually be inside the entry object as _id, id, or uuid, etc.

Beyond this, how you render this list depends on the data structure of each entry in response data.

The following is an example, if response.data was an array of entries that took this form {id: uuid, text: string}

   render(){
          //here's where i want to map the values.
    return(
       <div>
         {this.props.state?.map((entry, idx)=>{
            return <div key={entry.id}>{entry.text}</div>
         })}
       </div>
    )}
}

Read more here: Source link