Pass value from one component to another values in array ReactJS

Question

I'm trying to pass value from one component to another but when I do that, I get route in my http address as undefined instead of value. I have response from server in this form:

I'm trying to pass id values, and based on them make some actions. I get the error that GET request cannot be done due to value undefined. Here is my code:

class StationService {

    getStationById(id) {
        return axios.get(STATION_API + '/station/' + id);
    }

    updateStation(station, id) {
        return axios.put(STATION_API + '/station/' + id, station);
    }
}

import React, { Component } from 'react';
import StationService from '../services/StationService';

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

        this.state = {
            station: {
                id: this.props.match.params.id,
                city: '',
                name: '',
                trains: [
                    {
                        number: '',
                        numberOfCarriages: ''
                    }
                ]
            }
        }
    }

    componentDidMount() {

        if (this.state.station.id === '_add') {
            return;
        } else {
            StationService.getStationById(this.state.id).then((res) => {
                let station = res.data;
                this.setState({ name: this.state.station[0].name, city: station[0].city })
            });
        }
        console.log(this.state.station.name + 'dfddddd');
    }

    saveStation = (e) => {
        e.preventDefault();
        let station = { city: this.state[0].city, name: this.state[0].name }

        if (this.state.id === '_add') {
            StationService.createStation(station).then(res => {
                this.props.history.push('/stations');
            });
        } 
        }
    }

    
    }

    render() {
        return (
            <div>
...

            </div >
        );
    }
}

From this component I want to pass id value to CreateStationComponent. But I don't know what I'm doing wrong.

import React, { Component } from 'react';
import StationService from '../services/StationService';

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

        this.state = {
            stations: []
        }

        this.addStation = this.addStation.bind(this);
        this.editStation = this.editStation.bind(this);
        this.deleteStation = this.deleteStation.bind(this);
        this.showTrains = this.showTrains.bind(this);
    }

    deleteStation(id) {
        StationService.deleteStation(id).then(res => {
            this.setState({ stations: this.state.stations.filter(station => station.id !== id) });
        })
    }

    editStation(id) {
        this.props.history.push(`/add-station/${id}`);
    }

    componentDidMount() {
        StationService.getStations().then((res) => {
            this.setState({ stations: res.data });
        })
    }
    render() {
        return (
            <div>
                </div>
                <div className="row">

                        <tbody>
                            {this.state.stations.map(
                                station =>
                                    <tr key={station.id}>
                                        <td>{station.city}</td>
                                        <td>{station.name}</td>
                                        <td>
                                            <button onClick={() => this.editStation(station.id)} className="btn btn-info">Modify</button>
                                           
                                    </tr>

                            )}

                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

Any help would be appreciated.

Answer 1

Inside the constructor this.prop doesn't exist yet. Just access props .

constructor(props) {
    super(props)

    this.state = {
        station: {
            id: props.match.params.id,
            city: '',
            name: '',
            trains: [
                {
                    number: '',
                    numberOfCarriages: ''
                }
            ]
        }
    }
}

Also pointed out in a comment, this.state.id isn't defined

StationService.getStationById(this.state.id)

but this.state.station.id is. Change the reference.

StationService.getStationById(this.state.station.id)

Since this.state.station is an object and not an array, this.setState({ name: this.state.station[0].name, city: station[0].city }) is also incorrect.this.state.station[0] is undefined and should throw error when attempting to access name . Update the reference.

this.setState({
  name: this.state.station.name, 
  city: station[0].city,
})

And same for saveStation , update the state references.

saveStation = (e) => {
    e.preventDefault();
    
    let station = {
      city: this.state.station.city,
      name: this.state.station.name }

    if (this.state.station.id === '_add') {
        StationService.createStation(station).then(res => {
            this.props.history.push('/stations');
        });
    } 
}