ReactJS: How to update a component from another

Question

I'm trying to write a simple textarea char counter widget with ReactJS to learn how to use it, but I'm now sure how I can set value by fire textarea onChange event.

This is how I've wrote the app:

/**
 * @jsx React.DOM
 */

var EditorWidget = React.createClass({
    render : function() {
        return (
            <div className="editor-widget">
                <h4 className="title">Titolo articolo</h4>
                <TextArea maxLength={this.props.maxLength}/>
                <footer>
                    <TextStatus maxLength={this.props.maxLength} currentLength={this.props.currentLength}/>
                    <ActionButton />
                </footer>
            </div>
        );
    }
});

var TextArea = React.createClass({
    onTextChanged : function(event) {
        // how to update currentLength for TextStatus component?
        this.props.currentLength = event.target.value.length;
    },
    render : function() {
        return (
            <textarea onChange={this.onTextChanged} maxLength={this.props.maxLength} placeholder="Lampadario con catino romagnolo"></textarea>
        );
    }
});

var TextStatus = React.createClass({
    render : function() {
        return (
            <div className="info">
                Caratteri<span className="small-left-margin">{this.props.currentLength} / {this.props.maxLength}</span>
            </div>
        );
    }
});

var ActionButton = React.createClass({
    render : function() {
        return (
            <div className="action remove">
                Rimuovi elemento
            </div>
        );
    }
});

React.renderComponent(
    <EditorWidget maxLength="15" currentLength="0"/>,
    document.getElementById("container")
);

From onTextChanged method owned by TextArea component I'm not sure on how I can change the state of TextStatus component, how can I set the currentLength of TextStatus component?

Answer 1

You cannot modify a prop with the public API, only a state. So we should start by moving currentLength into the state of EditorWidget. We add this method to EditorWidget:

getInitialState: function() {
    return {currentLength: 0};
},

and pass the value by using this.state instead of this.props: <TextStatus currentLength={this.state.currentLength}. Each time currentLength changes, TextStatus will be updated with the new value.

Now we need the state to be updated each time the textarea emits a Change event. We can break this down into 2 steps: textarea emits a Change event to the TextStatus component, which reacts by emitting a custom event that carries the new length value. Let's call this custom event "TextChange".

We proceed from the top down. In EditorWidget, we add a handler for TextChange, that reads the length and updates currentLength:

handleTextChange: function(length) {
    this.setState({currentLength: length});
},

and pass it around: <TextArea onTextChange={this.handleTextChange}. in TextArea, we add a handler for Change that emits the new length via onTextChange:

handleChange : function(event) {
    var length = event.target.value.length;
    this.props.onTextChange(length);
},

and pass it to the textarea: <textarea onChange={this.handleChange}.

We're done. Each time the user types in some text in the text area, the events bubble up the component hierarchy up to EditorWidget, which updates its state and triggers a re-render of its children, including TextStatus.