Not able to edit content in textbox when it is derived from this.props.location.state

Question

I am working on Update Task activity, and I am not able to edit content in Textbox as it has been derived from this.props.location.state.****.

Please suggest. How I can keep it editable.

Code :

<textarea ref="taskdescr" type="text" class="form-control" value={this.props.location.state.tskDescr} id="taskDesc"></textarea>

https://stackoverflow.com/questions/46942476/avoid-constant-re-render-from-input-or-textarea-in-react-js — zfrisch, Feb 26 '19 at 14:05
Is the textarea in the main component or another child component? — lomse, Feb 26 '19 at 14:10

score 0 · Accepted Answer · answered Feb 26 '19 at 14:04

0

This is normal because when you provide value props in react.

The textarea will gain the value your provided after each render.

So because the value of your props does not change when you edit the textarea, the provided value is always the same.

To make your textarea editable your need to use the state instead of props.

If i understand what you want to do your state can look like site

{
  tskDescr: '',
  proptskDescr: '',
}

Use getDerivedStateFromProps and update tskDescr when proptskDescr is not equal to props.location.state.tskDescr.

And add an onChange event on the textarea to update the tskDescr

answered Feb 26 '19 at 14:04

Tristan De Oliveira

800
4
12

I have tried the same, but still it is non editable. – Sameer Patkar Feb 26 '19 at 14:11
You need to add an onChange event to update the value of the state – Tristan De Oliveira Feb 26 '19 at 14:35
this.setState({tskDescr: e.target.value })} type="text" class="form-control" value={this.state.tskDescr} id="taskDesc"> – Tristan De Oliveira Feb 26 '19 at 14:36
Thank you so much, Tristan. This is the thing I wanted to implement. – Sameer Patkar Feb 27 '19 at 04:37

score 0 · Answer 2 · edited Feb 26 '19 at 14:16

0

You need to change the value on the state using onChange for the textarea as follows

constructor(props){
    super(props);
    this.state = {
        location: {
            tskDescr: ''
        }
    }
}

And then

handleChange = (event) => {
    this.setState({
        location: {
            tskDescr: event.target.value
        }
    });
}

edited Feb 26 '19 at 14:16

Shrikantha Budya

646
1
4
15

answered Feb 26 '19 at 14:08

Syed

540
7
21

score 0 · Answer 3 · answered Feb 26 '19 at 14:21

Props are immutable use state if you want to mutate the values, after adding the state you need to provide a listener so that you can change the value.

<textarea
    value={this.state.text}
    onChange={this.handle}
/>

handle = ({target:{value}}) => this.setState({text:value});

Not able to edit content in textbox when it is derived from this.props.location.state

3 Answers3