ReactJS, how to edit a textarea and update the value when displaying the textareas from database?

Question

I am currently using node.js (for database storage using mySQL) and react.js (to display all text areas)

I'm not too sure how to do this, if I have a loop of textareas given from database, how would I be able to edit the value inside textarea and be able to retrieve that value in order to update it in my database when i click on 'Save data' button.

const WorkInProgressHLEDevDays = () =>{
return (
<tr>
<th> TEXTAREAs </th>
{this.state.WIPHLEsData.map((HLEDevDayTextAreas, i) => (
    <td key={i}>
    <textarea className="HLEDevDays"  onChange={this.handleChange} value={HLEDevDayTextAreas.HLEDevDays} spellcheck="false">

    </textarea>
    </td>

))}


</tr>

) }

Answer 1

There are numerous ways to implement this. The easiest is to make your components uncontrolled, though it's the least recommended one according to facebook:

{this.state.WIPHLEsData.map((HLEDevDayTextAreas, i) => (
  <td key={i}>
    <textarea
      name={`HLEDevDays_${i}`}
      className="HLEDevDays"
      defaultValue={HLEDevDayTextAreas.HLEDevDays}
      spellcheck="false"
    />
  </td>
)}

As the name suggests, React doesn't manage the state of each textarea, but lets your browser do that via regular DOM mutations. If you wrap this whole thing in a form , you will be able to read the values on your back-end (via the name attribute).