ReactJS - multiline textarea ReactJS - multiline textarea reactjs reactjs

ReactJS - multiline textarea


You are setting the value of the <textarea> the correct way, via the value attribute, the issue is that the string you are getting as the value of this.props.children is actually not what you think it is.

With an input value of "#Title \n text" in your <TextInput> component, the value of this.props.children is actually "#Title \\n text" (notice the double backslash), you need to do something like the following to correctly output the newline character:

    render: function(){      var value = this.state.currentValue.replace('\\n', '\n');      return (        <textarea name="body"          onChange={this.handleChange}          value={value}/>      )    }


If you specify your input value via value attribute then it textarea will be rendered with that value on every rerender. Instead, you should use defaultValue, if I understood correctly.

    var TextInput = React.createClass({        getInitialState: function(){            return {currentValue: this.props.children}        },        handleChange: function(event){          //handler        },        render: function(){            return (                <textarea name="body"                    onChange={this.handleChange}                    defaultValue={this.state.currentValue} />            )        }    });

Also I should mention that in React, using props in getInitialState is antipattern, but this is other question .. and explained in official documentation.