How to loop over object while just getting <img

[mahassan]

I m creating React app, and I am using http://www.omdbapi.com/ which gives you an object, I find out that to loop over an object. Little googling I was able to create this

                {Object.keys(movies).map((key, index)=>{
                    return(
                        <div key={index}>
                          {/* {key}: {JSON.stringify(movies[key].Title)} */}
                          {key === "Poster"? <img src={movies[key]} alt="hello"/> : ""}
                          {key === "Title"? <h1>{movies[key]}</h1>: ""}
                        </div>
                    )
                })}

but the page prints a lot of divs, not sure why.

I m very comfortable with an array but this is confusing me.

[kevinSmith]

Well, it’s hard to tell without seeing what the data looks like:

I see this:

                          {key === "Poster"? <img src={movies[key]} alt="hello"/> : ""}
                          {key === "Title"? <h1>{movies[key]}</h1>: ""}

And I wonder what will it do if the key is something else? It would put an empty div.

To confirm this, I would put:

                {Object.keys(movies).map((key, index)=>{
                    console.log(key)
                    return(
                    // ...

I suspect that you just need to change your logic a little.