It seems that my ponent props are not updated the way I thought they ought to be.

var AdditionalInfoBlock = React.createClass({

    getInitialState: function() {
        return ({
            ment: this.propsment
        });
    },

    onCommentChange: function(e) {
        this.setState({ment: e.target.value});
        this.props.onCommentChange(e);
    },

    render: function() {
        return (
            <ToolBlock>
                <div className="container">
                    <form>
                        <textarea value={this.propsment} onChange={this.onCommentChange} />
                    </form>
                </div>
            </ToolBlock>
        );
    }
};

var MainTool = React.createClass({

    getInitialState: function () {
        return {
            ment: undefined
        };
    },

    restart: function (e) {
        e && e.preventDefault && e.preventDefault();
        this.setState(this.getInitialState());
    },

    onCommentChange: function(e) {
        this.setState({
            ment: e.target.value
        });
    },

    render: function() {
        return (
            <div>
                <AdditionalInfoBlock ment={this.statement}
                                     onCommentChange={this.onCommentChange} />
            </div>
        );
    }
};

What I want this code to do is basically hold the ment's value until I post it and call restart - then it should reset the value in both AdditionalInfoBlock and MainTool. At the moment after restart is called when I console.log() the state of MainTool, the ment value is undefined. However, if I log AdditionalInfoBlock state and/or props, then the ment value is not reset in neither of those.

(PS. This is obviously a short version of the code, hopefully only incorporating the relevant bits. Although restart is not called in this excerpt, it doesn't mean that I have forgotten to call it at all :))

It seems that my ponent props are not updated the way I thought they ought to be.

var AdditionalInfoBlock = React.createClass({

    getInitialState: function() {
        return ({
            ment: this.props.ment
        });
    },

    onCommentChange: function(e) {
        this.setState({ment: e.target.value});
        this.props.onCommentChange(e);
    },

    render: function() {
        return (
            <ToolBlock>
                <div className="container">
                    <form>
                        <textarea value={this.props.ment} onChange={this.onCommentChange} />
                    </form>
                </div>
            </ToolBlock>
        );
    }
};

var MainTool = React.createClass({

    getInitialState: function () {
        return {
            ment: undefined
        };
    },

    restart: function (e) {
        e && e.preventDefault && e.preventDefault();
        this.setState(this.getInitialState());
    },

    onCommentChange: function(e) {
        this.setState({
            ment: e.target.value
        });
    },

    render: function() {
        return (
            <div>
                <AdditionalInfoBlock ment={this.state.ment}
                                     onCommentChange={this.onCommentChange} />
            </div>
        );
    }
};

What I want this code to do is basically hold the ment's value until I post it and call restart - then it should reset the value in both AdditionalInfoBlock and MainTool. At the moment after restart is called when I console.log() the state of MainTool, the ment value is undefined. However, if I log AdditionalInfoBlock state and/or props, then the ment value is not reset in neither of those.

(PS. This is obviously a short version of the code, hopefully only incorporating the relevant bits. Although restart is not called in this excerpt, it doesn't mean that I have forgotten to call it at all :))

• javascript
• reactjs

• Try accessing the state in ponentDidUpdate() instead of accessing it exactly after your setState. And facebook.github.io/react/tips/… – oobgam Commented Dec 26, 2015 at 12:33
• I'm not following entirely, could you elaborate on how that would solve my issue? The main problem is that in <textarea value={this.props.ment} onChange={this.onCommentChange} /> this.props.ment returns the previous prop value although a new one has been assigned in the parent object (should return undefined but returns whatever was there before calling restart). – wanaryytel Commented Dec 26, 2015 at 12:55
• I just got confused with too many ponent handling the same state. I don't think the textbox value property accepts undefined as an argument, try setting the initialState into an empty string or in your restart() method, this.setState({ment: ''}); – oobgam Commented Dec 26, 2015 at 13:13
• Tried that already before posting, but as stated in the original post, the problem lies elsewhere - console.log(this.state.props) does not return undefined either, but the previous value. – wanaryytel Commented Dec 26, 2015 at 13:21

1 Answer 1

Since you're handling the same state on both ponents MainTool and AdditionalInfoBlock, finding value of the ment can get confusing. While you're listening for the ment change, you're setting the state on both ponents.

The changed state in your parent ponent MainTool is passing the props to the child AdditionalInfoBlock. getInitialState is invoked once before mounting (getInitialState documentation). Therefore, the passed on property is not handled by you child ponent on succeeding updates. By using ponentWillReceiveProps, you will be able to handle the props sent by MainTool.

var AdditionalInfoBlock = React.createClass({
    ...

    ponentWillReceiveProps(nextProps) {
            this.setState({ment: nextProps.ment});
    },

Working Code: https://jsfiddle/ta8y1w1m/1/