Value Textarea does not work React

Question

Hello, I am trying to "popular" a textarea with a value, but when I try to edit the field and it does not allow. I tried using the property "defaultValue" but the field is empty. It follows parts of the code:

class TaskForm extends React.Component {

    constructor(props) {
        super(props);

        this.apis = new APIs();
        this.state = {
            taskEdit: [],
            title: '',
            description: '',
            project: '',
            service: '',
            date: moment(),
        };

    }

    componentDidMount() {
        this.setState({ isLoading: true });

        this.apis.editTask(this.props.location.state.id)//usar isso aqui
            .then(taskEdit => {

                return this.setState({
                    taskEdit: taskEdit ? taskEdit : {},
                    isLoading: false
                });
            });

    }

    handleChange(event) {
        this.setState({[event.target.name]: event.target.value});
    }

    render() {
        const { taskEdit } = this.state;
        const { history } = this.props;

        return (
            <Layout history={history} styleName='container'>
            <aside>
                {taskEdit.title}
                {taskEdit.description}
            </aside>
                <main>
                    <h1>{this.state.id}</h1>
                    <form onSubmit={this.handleSubmit}>
                        <h2>Edit Task</h2>
                        <br/>
                        <span>
                            Title:
                            <input defaultValue={taskEdit.title} type="text" size="100" className='title' name='title' onChange={this.handleChange}/>
                        </span>
                        <br/>
                        <br/>
                        <span>
                            Description:
                            <textarea value={taskEdit.description} type="text" className='description' name='description' onChange={this.handleChange}/>
                        </span>
                        <br/>
                        <br/>
                    </form>
                </main>

                <aside>

                </aside>
            </Layout>
        );
    }
}

export default TaskForm;

Stay like this: Does anyone have any tips?

Answer 1

The problem is how you’re doing, unnecessarily variable code with the same name doing different things, to simplify I’ve put together a minimal example:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      t1: 'a',
      t2: 'b'
    };
    this.handlerOnChange = 
      this.handlerOnChange.bind(this);
  }
  handlerOnChange(e) {
    const {name, value} = e.target;
    this.setState({[name]: value});
  }
  render() {
    const {t1, t2} = this.state;
    return (
      <div>
      <div>
        <input type="text" name="t1" value={t1} onChange={this.handlerOnChange} /> {t1}
      </div>
      <div>
        <textarea name="t2" value={t2} onChange={this.handlerOnChange}/> {t2}
      </div>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Do you realize that both the input and the textarea share the same change method and in this case you can not forget to put the same tag name html with the variables of javascript.

Answer 2

Hello, the function that will deal with changing the textarea should be initiated in the constructor, example:

...
    this.state = {
      taskEdit: [],
      title: '',
      description: '',
      project: '',
      service: '',
      date: moment(),
    };

    this.handleChange = this.handleChange.bind(this);
  }
...

This happens because of the scope of functions in Javascript.

His method handlerChange need to access the this of the component created and using the method bind in the constructor we can solve this problem by saying through the bind that the this function is the same as constructor.