CODEWITHSUNDEEP
arraysreactjssortingarraylist
Jordan Spackman
Jordan Spackman

Reputation: 383

Map an array inside an object inside an array React JS

I have an Array of Objects, and those objects have an object with an array in it. I want to map the "shoot: Array(6)" so I can list out the items.

How would I go about this? Im able to map the name, id, and instructions, but im having trouble getting access to and mapping the shots object then shoot array.

Current Code Information:

{Object.values(instructions).map(({id, name, Instructions}, i) => {
          return (
        <div key={id}>
         <p><b>{name}</b></p>
         <p>{Instructions}</p>
        </div>

          );
        })}

Upvotes: 1

Views: 1713

Answers (3)

Gangadhar Gandi
Gangadhar Gandi

Reputation: 2252

Destruct the Shots object along with {id, name, Instructions} and map the shoots array from the Shots object.

{
  Object.values(instructions).map(({id, name, Instructions, Shots}, i) => {
      return (
        <div key={id}>
          <p><b>{name}</b></p>
          <p>{Instructions}</p>
          {
            Shots.shoots.map(shoot => (<p>{shoot}</p>))
          }
        </div>
      );
  })
}

Upvotes: 0

Palencar
Palencar

Reputation: 159

try this code:

{Object.values(instructions).map(({id, name, instructions, shots}, i) => {
      return (
    <div key={id}>
     <p><b>{name}</b></p>
     <p>{instructions}</p>
     <p>{shots.amount}</p>
     {shots.shoot.map(item => (
       <div>{item}</div>
     ))}
    </div>
      );
    })}

Upvotes: 0

Shmili Breuer
Shmili Breuer

Reputation: 4147

You can map on the shoots array within each object like this:

{Object.values(instructions).map(({id, name, Instructions}, i) => {
      return (
    <div key={id}>
     <p><b>{name}</b></p>
     <p>{Instructions}</p>
    {shoot.shoots.map(shoot => (<p>{shoot}</p>))}

    </div>

      );
    })}

Upvotes: 1

Related Questions