Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react textarea value console warning

My code is work fine but node is warning with this code:

<div id="info">
        <p> User:<b> {show.firstName} {show.lastName} </b></p>
        <textarea value={show.description}> </textarea>
        <p> Adress:<b> {show.address.streetAddress} </b></p>
</div>

Warning:

proxyConsole.js:56 Warning: Failed form propType: 
You provided a `value` prop to a form field without an `onChange` handler. 
This will render a read-only field. If the field should be mutable use `defaultValue`. 
Otherwise, set either `onChange` or `readOnly`. Check the render method of `Details`

if i change
<textarea value={show.description}> </textarea>

to

<textarea defaultValue={show.description}> </textarea>

or

<textarea> {show.description}</textarea>

i got error

If you supplydefaultValueon a <textarea>, do not pass children

It's ok ? Or may be i'm doing something wrong. I don't need handler to textarea

like image 921
Redair Avatar asked Sep 18 '25 17:09

Redair


1 Answers

If you don't need to handle changes of value then you can ignore it, it's just a warning not an error.
With that being said, why would you use a text area for this purpose? use a <label/> or any other element that responsible for read only texts. keep in mind that from accessibility aspect your approach is not ideal as screen readers can get confused.

EDIT
As a followup to your comment:

But, why error with when use defaultValue

If you supply defaultValue on a <textarea>, do not pass children

You can pass defaultValue but you can't supply children (like in a normal html situation).
Taken from the DOCS:

In HTML, a <textarea> element defines its text by its children
In React, a <textarea> uses a value attribute instead.

like image 140
Sagiv b.g Avatar answered Sep 21 '25 09:09

Sagiv b.g