CODEWITHSUNDEEP
jsonreactjs
Neil Kelsey
Neil Kelsey

Reputation: 841

Getting data from an array in an array with ReactJS

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

TV Show - Flintstones

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 :-)

Upvotes: 0

Views: 41

Answers (1)

Morreski
Morreski

Reputation: 322

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>
    );
};

Upvotes: 1

Related Questions