ReactJS component not rendering textarea with state variable
Check this link from react docs: React Textarea Value
Basically for textArea react does not supports text enclosed within and you rather need to specify that as value
or defaultValue
.
The right way thus is
<textarea name="description" value="This is a description." />
or
<textarea name="description" defaultValue="This is a description." />
The difference with value
and defaultValue
is that specifying defaultValue
leaves the component uncontrolled:
With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.
...while specifying value
instructs React to control the component, meaning you need to update value property to make sure that change is reflected in the component:
Since the value attribute is set on our form element, the displayed value will always be this.state.value, making the React state the source of truth.
To get a clear idea of difference between value / default value check this: Fiddle for value Default Value Distinction Console will always show new value but component will not.