CODEWITHSUNDEEP
reactjs
Pathfinder
Pathfinder

Reputation: 994

Reactjs combine all the states to parent component

I have a component which has three child components which needs to pass the child states to its parent components so that the submit button can passon the info with all the user selected info. All the html elements are generated through JSON.

Please find my parent component below:

class ScreenField extends Component {
    bindNewState(newState) {
        //this.setState([...this.state,newState]) -- Not Working
    }
    render() {
        return (
            <span>
                <InputField screenField={this.props.screenField} handleStateChange={(newState) => this.bindNewState(newState)}/>
                <LabelField screenField={this.props.screenField} handleStateChange={(newState) => this.bindNewState(newState)}/>
                <RadioField screenField={this.props.screenField} handleStateChange={(newState) => this.bindNewState(newState)}/>
            </span>
        )
    }
}

So my bindNewState method should combine all the states that is passed through its child components. Unable to know how to do that?? Complete code is at the URL

Upvotes: 0

Views: 159

Answers (2)

Vincent D&#39;amour
Vincent D&#39;amour

Reputation: 3903

You're binding is not working, you can do bind bindNewState like this this.bindNewState.bind(this). This way, the scope of your parent component is kept. You final code will looks like this: 

class ScreenField extends Component {
    bindNewState(newState) {
        //this.setState([...this.state,newState]) -- Not Working
    }
    render() {
        return (
            <span>
                <InputField screenField={this.props.screenField} handleStateChange={this.bindNewState.bind(this)}/>
                <LabelField screenField={this.props.screenField} handleStateChange={this.bindNewState.bind(this)}/>
                <RadioField screenField={this.props.screenField} handleStateChange={this.bindNewState.bind(this)}/>
            </span>
        )
    }
}

Or since it's the same method, you bind bind it in the constructor like this: 

class ScreenField extends Component {
    constructor(props) {
      super(props);
      this.bindNewState = this.bindNewState.bind(this);
    }

    bindNewState(newState) {
        //this.setState([...this.state,newState]) -- Not Working
    }
    render() {
        return (
            <span>
                <InputField screenField={this.props.screenField} handleStateChange={this.bindNewState}/>
                <LabelField screenField={this.props.screenField} handleStateChange={this.bindNewState}/>
                <RadioField screenField={this.props.screenField} handleStateChange={this.bindNewState}/>
            </span>
        )
    }
}

Don't forget to pass props in super() if you bind your method in the constructor.

Upvotes: 1

dynamo
dynamo

Reputation: 1153

It seems bindNewState method is not bound to ScreenField class. do this in the constractor

class ScreenField extends React.Component {

 constructor(){
    super()
    this.bindNewState = this.bindNewState.bind(this)
  }
}

Upvotes: 0

Related Questions