如何渲染 ReactJS 中的嵌套数据？

Question

I have the bellow alike data, and I would like to render them.

Let's say I would like to display firstName , address , and seatType and flightId for each flight the passenger has.This has to be done for each passenger. How can I achieve that?

Updated

[
        {
            "id": 1,
            "firstName": "Smith",
            "lastName": "John",
            "address": [
                "1 Street",
                "YYY",
            ],
            "flights": [
                {
                    "flightId": 1,
                    "seatType": "oridinary"
                },
                {
                }
            ]
        },
        {},
]

Here is my code

render() {
    const { data } = this.state;
    return (
        <div>
            {" "}
            {Object.keys(data).map((key, index) => (
            <p key={index}>
                {" "}
                {key} {data[key].flights}
                {data[key].flights.map(k => (
                {data[key].flights[k]}
                ))}
            </p>
            ))}
        </div>
    );
}

Answer 1

I'm assuming you're looking for something like this:

return (
        <div>
            {
              passengers.map(passenger => {
                if (!passenger.id) { return null } /* + */
                return (
                  <div key={passenger.id}>
                    <span>{passenger.firstName} {passenger.lastName}</span>

                    <div>
                      <span>Passenger's Flights</span>
                      {
                        passenger.flights && /* + */
                        Array.isArray(passenger.flights) && /* + */  passenger.flights.map(flight => {
                          if (flight.flightId) {
                          return (
                            <div key={flight.flightId}>
                              {flight.seatType}
                            </div>
                            )
                          }
                          return null
                        })
                      }
                    </div>
                  </div>
                )
              })
            }
        </div>
    );
}

Note: remember that you should not use index as a key.

Edit : You need to add a null/undefined check

Answer 2

render() {
  const { data } = this.state;
  return (
    <div>
      {data.map((passenger, index) => (
        <p key={index}>
          {passenger.firstName} {passenger.address.join(' ')}
          {passenger.flights.map(flight => (
            <p>{flight.seatType} {flight.flightId}</p>
          ))}
        </p>
      ))}
    </div>
  );
}

Answer 3

render() {
  const { data } = this.state;
  return (
    <div>
      {data.map(({id, firstName, address, flights}) => (
        <p key={id}>
          <div>{firstName}</div>
          <div>{address.join(', ')}</div>
          {flights.map(f => (<div key={f.flightId}>{f.flightId}-{f.seatType}</div>))}
        </p>
      ))}
    </div>
  );
}

Not sure if it compiles but it's something like this. Also, if you have an ID, use it as key.