How can I render out the items in my array one at a time when returning them?

Question

I have an array of objects.

Each object has a few strings and an array of strings.

I want to render out the array of strings part of the object with an unordered list.

Right now I'm using:

const renderOut = this.props.data.filter(obj => {
   return this.state.keyToFind.includes(obj.name);
  }).map((obj, idx) => {
   return (
     <div key={idx}>
       <h2>{obj.name}</h2>
       <ul>
          <li>{obj.arrayItems}</li>
       </ul>
      </div>
    );
 });

The problem with the code above is that it renders out obj.arrayItems all in a row. For example...

[ "cup", "ball", "toy" ]

renders out as....

cupballtoy

but I'm trying to get it to look like:

• cup
• ball
• toy

Is there a way I can render out obj.arrayItems one at a time?

Answer 1

You can use a nested map function.

 const renderOut = this.props.data.filter(obj => {
 return this.state.keyToFind.includes(obj.name);
  }).map((obj, idx) => {
   return (
     <div key={idx}>
       <h2>{obj.name}</h2>
       <ul>
         {obj.arrayItems.map(item => <li key={item}>{item}</li>)}
       </ul>
      </div>
    );
 });

Answer 2

Yes, create a map function to return the strings into DOM elements inside the ul. React does require a unique key prop to help keep track of these components, but for simplicity, in this case, you can use the array index.

{ obj.arrayItems.map( (item, i) => <li key={i} >{ item }</li> ) }