displaying array data in react. output is not coming

Question

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?

a lot of things can be wrong since you didn't provide enough code segment but from what's given, the map is not properly used. You need to return res.id. Try something like this result.map((res) => res.id) considering the fact you only want id of each element — Araf
– Araf, Commented Feb 20, 2022 at 8:09
thank you araf. I actually want to print all the element. the code you suggested is working for id. but if I open bracked and put res.id; res.name then nothing is getting printted. — Shruti sharma
– Shruti sharma, Commented Feb 20, 2022 at 8:21

Gass · Accepted Answer · 2022-08-25 19:32:49Z

2

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>

edited Aug 25, 2022 at 19:32

answered Feb 20, 2022 at 8:14

Gass

9,6405 gold badges47 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shruti sharma Over a year ago

actually it is perfectly working. let support along with Id I need to print name so I am writing res=>{res.id ; res.name} then it is not printing anything.

Shruti sharma Over a year ago

can you suggest how I can print other values like name , createdAt along with id, please.

Andy Over a year ago

return <p>{res.id}</p> surely.

Gass Over a year ago

I added a new code snippet, try it out.

Gass Over a year ago

Great to hear! keep it up

|

Collectives™ on Stack Overflow

displaying array data in react. output is not coming

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related