How to setProps in ReactJS

Question

I have 2 Components one called NodeWidget and another called PopupWidget. In the NodeWidget it has a Model assigned to it which looks like the following:

PopupModel

export class PopupModel {
    question: string;
    model: string;

    constructor(question: string, model: string) {
        this.question = question;
        this.model = model;
    }
}

The parent Component is NodeWidget which passes in the Model to the PopupWidget with data in.

NodeWidget

{ this.state.showComponent ?
    <PopupWidget model={this.props.popupModel} /> :
    null
}

Then finally in the child Component we have this code:

export interface PopupWidgetProps { 
    model: PopupModel;
}

export interface PopupWidgetState { }


export class PopupWidget extends React.Component<PopupWidgetProps, PopupWidgetState> {

    constructor(props: PopupWidgetProps) {
        super(props);

        this.state = { };

        this.handleClick = this.handleClick.bind(this);

    }

    handleClick() {
        console.log(this.props);
    }


    render() {        
        return (
            <div className="popup">
                <div className="popup_inner">
                    <h1>TEST</h1>
                    <input type="text" value={this.props.model.question} placeholder="Write a question..." />                   
                    <button onClick={this.handleClick}>close me</button>
                </div>
            </div>
        );
    }
}

I want to be able to bind the value of the input to the model and then for it to update the original model in the Parent Component, am i doing this correctly as it does not seem to work.

This isn't how React works. React uses a unidirection flow. [Check here to see the difference between Angular's two-way data binding and Reacts unidirectional flow.](https://stackoverflow.com/questions/34519889/can-anyone-explain-the-difference-between-reacts-one-way-data-binding-and-angula) — Chase DeAnda, Feb 01 '18 at 20:06
@ChaseDeAnda Ahh I see so you can't directly bind the input to the model. If i use an onChange event how would i go about updating the model? — Ben Clarke, Feb 01 '18 at 20:31

score 0 · Accepted Answer · answered Feb 01 '18 at 22:59

You can do this to pass the input result to parent component on the button click:

PopupWidget :

export class PopupWidget extends React.Component<PopupWidgetProps, PopupWidgetState> {
    constructor(props: PopupWidgetProps) {
        super(props);
        this.state = { question: '' };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.props.inputResult(this.state.question)
    }

    render() {        
        return (
            <div className="popup">
                <div className="popup_inner">
                    <h1>TEST</h1>
                    <input type="text" value={this.state.question} onChange={(question) => { this.setState({ question })}} placeholder="Write a question..." />                   
                    <button onClick={this.handleClick}>close me</button>
                </div>
            </div>
        );
    }
}

NodeWidget :

constructor(props) {
   super(props);
   this.getInputResult = this.getInputResult.bind(this);
}
getInputResult(question) {
    this.props.inputResult(question);
    this.setState({ showComponent: false });
}
...
{ this.state.showComponent ?
    <PopupWidget inputResult={this.getInputResult} /> :
    null
}

Finally in PopupModel (i assume this is a react component, i don't know if you can work with simple es6 class in react):

export class PopupModel extends React.Component {

    constructor(props) {
        this.state = { question:  '', model: '' }; // set your initial state
        this.getInputResult = this.getInputResult.bind(this);
    }

    getInputResult(question) {
        this.setState({ question }); // here's our result from the input
    }
    render(){
        return(<NodeWidget inputResult={this.getInputResult} />);
    }
}

This can be pretty boring to handle if you have multiple components between the two which have to communicate.

You can use a HOC like Redux or MobX to handle an app state that can be passed in any component, and any component can dispatch actions to update the app state, you should go for it if you have multiple cases like this.

How to setProps in ReactJS

1 Answers1