1

I'm trying to pass value from one component to another. First one looks like this:

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

        this.state = {
            stations: []
        }

        this.editStation = this.editStation.bind(this);
    }


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

    componentDidMount() {
        StationService.getStations().then((res) => {
            this.setState({ stations: res.data });
        })
    }

    }

    render() {
        return (
            <div>

                        <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>
                          ...                  
                </div>
            </div>
        );
    }
}

export default ListStation;

And another looks like this:

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: ''
                    }
                ]
            }
        }

        this.changeCityHandles = this.changeCityHandles.bind(this);
        this.changeNameHandles = this.changeNameHandles.bind(this);
        this.saveStation = this.saveStation.bind(this);
    }

    componentDidMount() {

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

But when I try to pass value from one component to another I get error: Property of undefined. The response I get from API looks like this: enter image description here

I'm trying to edit values based on the id taken from the first component but it seems to fail.

Ox Ox
  • 97
  • 6

2 Answers2

4
if (this.state.station[0].id === '_add') {
        return;
    }

Have a look at this if statement from your codebase I think you should remove [0] after this.state.station ... this is because station is an object not an Array

Phillip Rekhotho
  • 91
  • 5
  • Yes, that's solving one problem, but the value is still undefined – Ox Ox Jan 08 '21 at 22:44
  • @OxOx You mean in the `console.log` with `dfddddd`? That's expected because you're logging it before `getStationById` finishes, and anyways `this.setState` is asynchronous: https://stackoverflow.com/q/30782948/996081 – cbr Jan 08 '21 at 22:51
  • @cbr No, I mean when passing values from one component to another. my http address is `/undefined`, and in that place should be value – Ox Ox Jan 08 '21 at 22:57
  • @OxOx Please edit your question to include your `` and `StationService`. – cbr Jan 08 '21 at 22:59
  • @OxOx Also please consider accepting one of these answers and asking a new question, since these questions answer your original question and the new issue is separate from the `property of undefined` error. – cbr Jan 08 '21 at 23:02
1

Change it to if (this.state.station.id === '_add') {

Or Assayag
  • 5,662
  • 13
  • 57
  • 93