displaying array data in react. output is not coming-CodePudding

when I am printing console.log(response.data) in console below output is coming.

I created one hook const [result,setResult] = useState([]);

and then output of API I set as

setResult(response.data);

when I am writing below code it is just printing " Data is". it is not printing output of result

              <h1>
                  Data is
               {
                   result.map((res:any)=>{
                       {res.id};
                   })
                }    

              </h1>

what mistake I am doing?

CodePudding user response：

The whole logic of your code it's okay. You are using the useState Hook correctly. And the data your passing to the state is an array which will work fine with the map() method. The only problem I'm seeing is that your map() method is not well implemented.

Try this instead:

<h1>
  Data is
  {
   result.map((res:any)=>{
      return <p>{res.id}</p>
   })
  }    
</h1>

The map() method always returns something. When it is a one liner it is not necessary to type return.

<h1>
  Data is
  {
   result.map((res:any) => res.id )
  }    
</h1>

To print multiple properties of the object:

<h1>
  Data is
  {
   result.map((res:any) => {
      return [
        <div key={res.id}>
           <p>{res.id}</p>
           <p>{res.name}</p>
           <p>{res.createdAt}</p>
        </div>
      ]
   })
  }    
</h1>