javascript - Get values from array of JSONs in JSON ReactJS

Question

I'm trying to get values from JSON that looks like this:

{
    "id": 371,
    "city": "London",
    "name": "London Station",
    "trains": [
        {
            "id": 375,
            "number": "1023",
            "numberOfCarriages": "21"
        }
    ]
}

I want to get values from trains, like number and numberOfCarriages. I'm trying to get those values in React. My React code:

class ViewTrainsComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            id: this.props.match.params.id,
            station: []
        }
    }


    render() {
        return (
            <div>
                        <div className="row">
                            {/* <div>{this.state.station[0].trains[0].number}</div> */}
                        </div>
            </div>
        );
    }
}

Am I doing it right? How can I get those values in render function?

EDIT.

Here is the response from API

Answer 1

Avoid setting and updating state directly with

this.state = ...

except when you are initializing it in the constructor. Instead, use either setState() function or the useState hook.

But I think your question is more about how to get the values of the trains in render function, You can access those as

render() {
    return <div>{this.state.stations[i].trains[j].number}</div>
  }

so for the first train of first station i=0 and j=0 and for the second train in first station i=0 and j=1. for the first train of second station i=1 and j=0 and for the second train in first station i=1 and j=1.