CODEWITHSUNDEEP
javascripthtmlhtml-tablebootstrap-4
AG_HIHI
AG_HIHI

Reputation: 2005

ReactJs: Is it possible to retrieve the edited value inside this tag <td contentEditable='true'> {this.state.value} </td> tag

I have searched in many different stackOverflow questions and native html documentation and apparantly there's no way to retrieve the value inside a :

<td contentEditable='true'> {this.state.value}  </td>

Apparently there's no native way to retrieve the edited value by the user?
In my app:
enter image description here

After the user clicks on the green button, I set the contentEditable attribute to true and hence he is able to edit the right column. However, I've found myself stuck when I wanted to retrieve the new value that the user has typed to send it to the backend!
But this doesn't make any sense, because what's the use of the attribute contentEditable if I cannot retrieve the edited value?
I have only found the onClick listener which I can use to learn when the user has clicked on a particular cell.
PS: I remember in Angular I used to do this easily with two-way data binding..

Upvotes: 1

Views: 127

Answers (2)

Jose Cabrera Zuniga
Jose Cabrera Zuniga

Reputation: 2637

Instead of {this.state.value} your code should use a component that supports entering information through it. For example, textarea and use its related event functions to send the info to the server.

Upvotes: 0

rnmalone
rnmalone

Reputation: 1060

<td onClick={() => this.setState({ isEditing: true })}>
  {this.state.isEditing ? <input {...yourPropsToHandleInput} /> : {this.state.value}
</td>

Upvotes: 1

Related Questions