React Modifying Textarea Values

Question

I am working on a project which is basically notepad. I am having problems though updating the <textarea>'s value when an ajax call is made. I tried setting the textarea's value property but then no changes to its value can be made. How can I make it so on a state change the textarea's value changes and can be edited.

The code I have is as follows.

In the parent class

<Editor name={this.state.fileData} /> 

In the Editor class

var Editor = React.createClass({ render: function() { return (     <form id="noter-save-form" method="POST">     <textarea id="noter-text-area" name="textarea" value={this.props.name}></textarea>     <input type="submit" value="Save" />     </form> ); } 

});

I can't use defaultValue because the value of the textarea is not known on page load and when I try and put the data between the textareas nothing happens. I would like it to take the state value whenever the state changes but have it editable in between.

Thanks

Edit

I managed to get it working using jQuery but would like to do it in React instead, I called this before render:

$('#noter-text-area').val(this.props.name); 

Answer 1

I think you want something along the line of:

Parent:

<Editor name={this.state.fileData} /> 

Editor:

var Editor = React.createClass({   displayName: 'Editor',   propTypes: {     name: React.PropTypes.string.isRequired   },   getInitialState: function() {      return {       value: this.props.name     };   },   handleChange: function(event) {     this.setState({value: event.target.value});   },   render: function() {     return (       <form id="noter-save-form" method="POST">         <textarea id="noter-text-area" name="textarea" value={this.state.value} onChange={this.handleChange} />         <input type="submit" value="Save" />       </form>     );   } }); 

This is basically a direct copy of the example provided on https://facebook.github.io/react/docs/forms.html

Update for React 16.8:

import React, { useState } from 'react';  const Editor = (props) => {     const [value, setValue] = useState(props.name);      const handleChange = (event) => {         setValue(event.target.value);     };      return (         <form id="noter-save-form" method="POST">             <textarea id="noter-text-area" name="textarea" value={value} onChange={handleChange} />             <input type="submit" value="Save" />         </form>     ); }  Editor.propTypes = {     name: PropTypes.string.isRequired };