javascript - I try to parse my data with props between react components but I get undefined values

Question

I am new to react so any help I get I am grateful for it. I want to pass data from my RobotForm component to my RobotList component, but when I test it with my values from the last test on RobotList.test.js I get data undefined. What should I do?

The test introduces some data and is expected to get a robot with correct values.

Error:

● correct robot

    expect(received).toEqual(expected)

    Expected value to equal:
      {"id": 3, "mass": "test_mass", "name": "test_name", "type": "test_type"}
    Received:
      {"id": 3, "mass": undefined, "name": undefined, "type": undefined}

    Difference:

    - Expected
    + Received

      Object {
        "id": 3,
    -   "mass": "test_mass",
    -   "name": "test_name",
    -   "type": "test_type",
    +   "mass": undefined,
    +   "name": undefined,
    +   "type": undefined,
      }

      49 |      button.simulate('click')
      50 |      let robot = component.find(Robot).last()
    > 51 |      expect(robot.props().item).toEqual({id: 3, name : 'test_name', type : 'test_type', mass: 'test_mass'})
         |                                 ^
      52 | })
    

RobotForm.js

class RobotForm extends Component{

    render() {
        return (
            <div>
                <label htmlFor="name">Name</label>
                <input type="name" id="name" name="name" onChange={this.handleChange} />                
                <label htmlFor="type">Type</label>
                <input type="text" id="type" name="type" onChange={this.handleChange} />
                <label htmlFor="mass">Mass</label>
                <input type="text" id="mass" name="mass" onChange={this.handleChange} />
                <button type="submit" value="add" onClick={this.addRobotel}>Add Robot</button>
            </div>
        )
    }

    addRobotel = () =>{

        let robot ={
            name : this.props.name,
            type : this.props.type,
            mass : this.props.mass
        };
         this.props.onAdd(robot);
    }
    
}

export default RobotForm

RobotList.js

class RobotList extends Component {
    constructor(){
        super()
        this.state = {
            robots : []
        }

        this.addRobotel = (r) => {
            this.store.addRobot(r);
        }
    }
    componentDidMount(){
        this.store = new RobotStore()
        this.setState({
            robots : this.store.getRobots()
        })
        this.store.emitter.addListener('UPDATE', () => {
            this.setState({
                robots : this.store.getRobots()
            })          
        })
    }

    render() {
        return (

            <div>
                {
                    this.state.robots.map((e, i) => 
                        <Robot item={e} key={i} />
                    )
                }

                <RobotForm onAdd={this.addRobotel} />
            </div>
        )
    }
}
export default RobotList

   

question from:https://stackoverflow.com/questions/65864998/i-try-to-parse-my-data-with-props-between-react-components-but-i-get-undefined-v

Answer 1

You forgot to pass props to RobotForm in RobotList.js:

render() {
    return (

        <div>
            {
                this.state.robots.map((e, i) => 
                    <Robot item={e} key={i} />
                )
            }

            <RobotForm 
            name="test_name" 
            type="test_type" 
            mass="test_mass" 
            onAdd={this.addRobotel} />
        </div>
    )
}

Getting robot values from inputs instead of props:

RobotForm.js

class RobotForm extends Component{
    constructor(props) {
        super(props);

        this.name = this.props.name;
        this.type = this.props.type;
        this.mass = this.props.value;
    }

    render() {
        return (
            <div>
                <label htmlFor="name">Name</label>
                <input type="name" id="name" name="name" defaultValue={this.props.name} onChange={(event) => this.name = event.target.value} />                
                <label htmlFor="type">Type</label>
                <input type="text" id="type" name="type" defaultValue={this.props.type} onChange={(event) => this.type = event.target.value} />
                <label htmlFor="mass">Mass</label>
                <input type="text" id="mass" name="mass" defaultValue={this.props.mass} onChange={(event) => this.mass = event.target.value} />
                <button type="submit" value="add" onClick={this.addRobotel}>Add Robot</button>
            </div>
        )
    }

    addRobotel = () =>{

        let robot ={
            name : this.name,
            type : this.type,
            mass : this.mass
        };
         this.props.onAdd(robot);
    }
    
}

I just used props as default values you can delete them if you want.