Display the objects inside an array in ReactJS-CodePudding

let favorites=[];
var myObj = {
      "username" : username,   
      "problems" : solved  
  };
  //push the object to your array
  favorites.push( myObj );

I am pushing the response from an axios API into an array. How to display the information in ReactJS in the form of table. Any help is highly appreciated.

CodePudding user response：

Simple map function returning each row of the body:

<table>
    <thead>
        <tr>
            <th>Username</th>
            <th> Problems</th>
        </tr>
    </thead>
    <tbody>
        {favourites.map((fav) => {
            return (
                <tr>
                    <td>{fav.username}</td>
                    <td>{fav.problems}</td>
                </tr>
            );
        })}
    </tbody>
</table>;

CodePudding user response：

Just to check you can map and stringify each object.

favorites.map(f => <div>{JSON.stringify(f)}</div>

Or you can have some good UI to dispay object values from favorites with map.

favorites.map(f => {
    return <div>
        <h6>{f.username}</h6>
        <p>{f.username}</p>
    </div>

}