React-Native returning objects from nested array

Question

I am new to React-Native and struggling to return objects from a nested array (Hopefully I am using the correct terminology).

I am grabbing my data from the tfl tube status api JSON is below:

[
 {
   "$type": "Tfl.Api.Presentation.Entities.Line, 
   Tfl.Api.Presentation.Entities",
   "id": "bakerloo",
   "name": "Bakerloo",
   "modeName": "tube",
   "disruptions": [],
   "created": "2018-03-13T13:40:58.76Z",
   "modified": "2018-03-13T13:40:58.76Z",
   "lineStatuses": [
       {
         "$type": "Tfl.Api.Presentation.Entities.LineStatus, 
          Tfl.Api.Presentation.Entities",
          "id": 0,
          "statusSeverity": 10,
          "statusSeverityDescription": "Good Service",
          "created": "0001-01-01T00:00:00",
          "validityPeriods": []
        }
   ],
   "routeSections": [],
   "serviceTypes": [],
   "crowding": {}
},

I am fetching the data using Axios.

state = { lineDetails: [] };

componentDidMount() {
    axios.get('https://api.tfl.gov.uk/line/mode/tube/status')
    .then(response => this.setState({ lineDetails: response.data }));
};

I am returning the data like this.

    renderLineDetails() {
    return this.state.lineDetails.map((details) => 
    <TubeList
    key={details.id}
    details={details} />

)};


 render() {
    return (
        <ScrollView>
            {this.renderLineDetails()}
        </ScrollView>
    );
}

My TubeList component looks like:

const TubeList = ({ details }) => {
const { name, statusSeverityDescription } = details;
const { nameStyle, statusStyle } = styles;

return (
    <TubeCard>
        <CardSectionTitle>
            <Text style={nameStyle}>{name}</Text>
        </CardSectionTitle>
        <CardSectionStatus>
            <Text style={statusStyle}>{statusSeverityDescription}</Text>
        </CardSectionStatus>
    </TubeCard>
);

};

Is someone able to explain why statusSeverityDescription is not displaying in my list below.

Iphone Simulator image

Thank you.

Answer 1

Instead of statusSeverityDescription you have to use lineStatuses and map it for getting statuses.

TubeList:

const TubeList = ({ details }) => {
  const { name, lineStatuses } = details;
  const { nameStyle, statusStyle } = styles;

  return (
    <TubeCard>
        <CardSectionTitle>
            <Text style={nameStyle}>{name}</Text>
        </CardSectionTitle>

        {lineStatuses.map((status) =>
           <CardSectionStatus>
            <Text style={statusStyle}>{status.statusSeverityDescription}</Text>
           </CardSectionStatus>
        }

    </TubeCard>
  );
};

Answer 2

Thanks for all your comments. I have fixed the issue following Prasun Pal's comments. Below is my new code and screenshot of the working app.

 renderLineDetails() {
    return this.state.lineDetails.map((details) => 
    <TubeList
    key={details.id}
    lineStatus={details.lineStatuses[0]}
    lineName={details}
    />
)};

const TubeList = ({ lineName, lineStatus }) => {
const { statusSeverityDescription } = lineStatus;
const { name } = lineName;
const { nameStyle, statusStyle } = styles;

return (
    <TubeCard>
        <CardSectionTitle>
            <Text style={nameStyle}>{name}</Text>
        </CardSectionTitle>
        <CardSectionStatus>
            <Text style={statusStyle}>{statusSeverityDescription}</Text>
        </CardSectionStatus>
    </TubeCard>
);

};

iPhone screenshot of working app