this.props.change does not cause re-render of new value

Question

Here is an onClick handler that fires:

fieldClicked(field) {

let selectedDescription = this
  .props
  .serviceConfigInfoValue
  .find(x => x.Name == field)
  .Description

this
  .props
  .change('currentFieldDescription', selectedDescription)

}

The causes the correct value to be set in the form state and causes a field to update that is set to read that value elsewhere in the form.

<Field
            name="currentFieldDescription"
            component={SimpleTextAreaInput}
            rows={10}
            cols={50}/>

Here is the SimpleTextAreaInput component. In fact, in debugging in Chrome, I even see the correct description passed into the value.

The problem is that the screen doesn't render with the updated description value.

import React, {Component} from "react";

export default(field) => {

 const {
  input: {
   value,
   onChange
 },
 rows,
 cols
 } = field

 return (
   <div>
     <p>Redux-forms Text Area</p>
     <textarea rows={rows} cols={cols}>{value}</textarea>
   </div>
)

}

Answer 1

In React, a uses a value attribute instead. This way, a form using a can be written very similarly to a form that uses a single-line input

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

You have to give it the value as prop.