Getting data from an array in an array with ReactJS

Question

I'm very new to ReactJS but I think I'm making some headway ...

I think I'm almost there but I've fallen down at what I think is near enough my final hurdle ... here's what I'm trying to achieve;

TV Show - Simpsons

Name: Bart Simpson, Gender: Male
Name: Homer Simpson, Gender: Male
Name: Ned Flanders, Gender: Male

TV Show - Flintstones

Name: Fred Flintstone, Gender: Male
Name: Barney Rubble, Gender: Male
Name: Wilma Flintstone, Gender: Female

I could have hundreds of these so I don't want to just build these in two React elements - so I've organised my data as such which I'm happy with;

var shows = [
{
  id: 1,
  show: 'Simpsons',
  characters: [
  { id: 1, name: 'Bart Simpson', gender: 'Male'},
  { id: 2, name: 'Homer Simpson', gender: 'Male'},
  { id: 3, name: 'Ned Flanders', gender: 'Male'}
]
},
{
  id: 2,
  show: 'Flintstones',
  characters: [
    { id: 1, name: 'Fred Flintstone', gender: 'Male'},
    { id: 2, name: 'Barney Rubble', gender: 'Male'},
    { id: 3, name: 'Wilma Flintstone', gender: 'Female'}
]
}
];

And then I'm building my data with a table as such:

const ShowsTable = (props) => {
    return (
    <div>
      <h1>Show - {props.show}</h1>
      <table>
        <tr>
          <th>Name</th>
          <th>Gender</th>
        </tr>
        <tr>
          <td>XXX</td>
          <td>YYY</td>
        </tr>
      </table>
    </div>
  );
};

I've got this 'working' where I can get the shows name and anything from the main array but I can't get the data from the nested 'characters' child array

So XXX and YYY is where I would like to get the data for the names or gender, in my mind I should be able to do something like ...

{props.characters}

Or maybe getting the nested elements so something like

{props.characters.props.name}

But I can't figure this out or find any documentation for this - so is this a syntax error or am I missing something more fundamental ... maybe I'm asking the wrong question? I'm really not sure

If someone can point me in the right direction with an explanation or some documentation I'd be very grateful :-)

Morreski · Accepted Answer · 2017-05-23 09:50:46Z

1

You can do something like:

const ShowsTable = (props) => {
    return (
        <div>
          <h1>Show - {props.show}</h1>
          <table>
              <tr>
                  <th>Name</th>
                  <th>Gender</th>
              </tr>

              {props.characters.map((char, index) => (
                  <tr key={index}>
                      <td>{char.name}</td>
                      <td>{char.gender}</td>
                  </tr>
               ))}    
            </table>
        </div>
    );
};

edited May 23, 2017 at 9:50

answered May 23, 2017 at 9:43

Morreski

3221 silver badge5 bronze badges

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

1 Comment

Neil Kelsey Over a year ago

Works like a dream and I get the logic I was missing - thank you Morreski!

Collectives™ on Stack Overflow

Getting data from an array in an array with ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related