[FIXED] How to implement useState function?

Issue

I am trying to implement useState function from a tutorial.

  const [posts, setposts] = useState([
    { username:"cleverqazi",
      caption:"wow it works",
      imageUrl:"https://images.pexels.com/photos/5624397/pexels-photo-5624397.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",},
    
    {  username:"its_cleverqazi",
       caption:"wow it ",
       imageUrl:"https://images.pexels.com/photos/5624397/pexels-photo-5624397.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" }
   ]);

 {
    posts.map(post=> {
     return <Post username={post.username} caption={post.caption} imageUrl={post.imageUrl}  />
    })
  }

I was expecting to implement useState function, and show the data. But nothing shows.

Solution

You have to return

<Post />

And add a Key/index value when using Map Meaning:

 {
    posts.map((data, index) => {
       return <Post key={index} username={data.username} caption={data.caption} imageUrl={data.imageUrl}  />
    })
  }

Answered By - Pätsn
Answer Checked By - - Mildred Charles (ReactFix Admin)