Skip to content
Advertisement

How do I render a component for each object in an array?

I have a functional component. I have an array of objects.

const talents = [{…}, {…}]

I also return the following components:

JavaScript

What I am trying to do is return the Accordion component for every object in the array.

What ive tried so far.

In the card component i ran a map() on the array:

JavaScript

Nothing happens.

I also tried to create a function that maps throught the array and returns the jsx, and then just run the function inside the card component, like this:

JavaScript

Then i ran the function in card component like this:

JavaScript

Again, nothing happens.

Also wrapped the function in {}:

JavaScript

Nothing.

Advertisement

Answer

If talents is empty, then you will always get a blank result from talents.map().

JavaScript

Don’t forget that console.log(object) will show the result of the object at the end of runtime, too, and not at the moment it is called. You can get around that with console.log(JSON.stringify(object)), if there are no recursive references.

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement