Render nested object in Reactjs

Question

I' have react js project that does the nested rendering. I'm seeing the output on consoles, but no on the web.

<div>
              {Experience &&
                Experience.map((exp) => {
                  return (
                    <div className="text-white">
                      {
                        //Here we loop trough the exp keys
                        Object.keys(exp).forEach((key) => {
                          // console.log("key", key);
                          // console.log("key data", exp[key]);
                          // console.log(exp[key].desc);
                          return (
                            <p
                              dangerouslySetInnerHTML={{
                                __html: exp[key].desc,   //this doesnt display
                              }}
                            />
                          );
                        })
                      }
                    </div>
                  );
                })}
            </div>

What is the value of Experience? If this value comes from Firebase, show the code for how you read it and pass it to the rendering, and the data that you're reading from the database. — Frank van Puffelen
– Frank van Puffelen, Commented Sep 9, 2021 at 20:37
I got it working with Object.keys(exp).map instead of foreach. If this is the data structure of Experience. const Experience = [ { abc: { desc: 'abc' }, efg: { desc: 'efg' } }, { hij: { desc: 'hij' }, klm: { desc: 'klm' } } ]; — Sanish Joseph
– Sanish Joseph, Commented Sep 9, 2021 at 20:53
Also make sure className="text-white" is not hiding the data because your text is white and background is also white. I hope it's not !! but happened to me as I have bootstrap styles. — Sanish Joseph
– Sanish Joseph, Commented Sep 9, 2021 at 20:57

Sanish Joseph · Accepted Answer · 2021-09-09 21:09:50Z

2

I think this question is more of knowing the diffrence between foreach and map.

That means foreach is not retuning anything and mutating data. If you change your foreach to map, things will work.

map() allocates memory and stores return values. forEach() throws away return values and always returns undefined.

forEach() will allow a callback function to mutate the current array. map() will instead return a new array.

Note: Make sure className="text-white" is not hiding your white text.

edited Sep 9, 2021 at 21:09

answered Sep 9, 2021 at 21:01

Sanish Joseph

2,2763 gold badges18 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

Render nested object in Reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related