I'm trying to set the state according to the input field value (controlled ponents in react js), but the event always results undefined once I try to change the value of the input field.

App.js

initialState = {
        set: {
            team1Score: 5,
            team2Score: 6,
        },
    };

handleChange(e) {
        this.setState({
            set: {
                team1Score: e.target.value,
                team2Score: e.target.value,
            }
        });
    }

render() {
return (
   <Match   
       set = {this.state.set}               
       handleChange={(e) => {this.handleChange()}}>
)}

Match.js

<ScoreInput
  handleChange={props.handleChange}
  set={props.set}
/>

ScoreInput.js

const ScoreInput = (props) =>

    <div className="c-set-input">
        <input
            className="c-set-input__field"
            placeholder="0"
            value={props.set.team1Score}
            onChange={props.handleChange}
        ></input>
        <span>:</span>
        <input
            className="c-set-input__field"
            placeholder="0"
            value={props.set.team2Score}
            onChange={props.handleChange}
        ></input>
    </div>

I'm trying to set the state according to the input field value (controlled ponents in react js), but the event always results undefined once I try to change the value of the input field.

App.js

initialState = {
        set: {
            team1Score: 5,
            team2Score: 6,
        },
    };

handleChange(e) {
        this.setState({
            set: {
                team1Score: e.target.value,
                team2Score: e.target.value,
            }
        });
    }

render() {
return (
   <Match   
       set = {this.state.set}               
       handleChange={(e) => {this.handleChange()}}>
)}

Match.js

<ScoreInput
  handleChange={props.handleChange}
  set={props.set}
/>

ScoreInput.js

const ScoreInput = (props) =>

    <div className="c-set-input">
        <input
            className="c-set-input__field"
            placeholder="0"
            value={props.set.team1Score}
            onChange={props.handleChange}
        ></input>
        <span>:</span>
        <input
            className="c-set-input__field"
            placeholder="0"
            value={props.set.team2Score}
            onChange={props.handleChange}
        ></input>
    </div>

• javascript
• reactjs

• 3 you forgot to pass e in handleChange function – Abhishek Commented Jul 13, 2017 at 13:52

1 Answer 1

It seems that you forgot to pass the parameter to your handleChange function so try this

handleChange={(e) => this.handleChange(e)}