score:58
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.
score:-4
i had the same problem. i solved it by using controlled component, e.g.
state.value = this.props.value
<textarea value={this.state.value} onchange={handler} />
it works fine to control the input part. however, i had another issue, i need to init/change the state.value to props.value whenever there is a re-render.
i used the lift-cycle methods and it works perfect fine.
componentwillreceiveprops: function(){
this.setstate({
value: this.props.value
}) }
hope this helps.
score:0
actually that is exactly what is wrong. from the docs:
if you want to initialize the component with a non-empty value, you can supply a defaultvalue prop.
Source: stackoverflow.com
Related Query
- ReactJS component not rendering textarea with state variable
- ReactJS component textarea not updating on state change
- conditional rendering of the same component with different props does not unmount the component in ReactJS
- Completely stumped at this reactjs logic, of a variable not updating the state of a component
- Reactjs useState not changing boolean state and not rendering child component on click
- Component not rendering fully and not changing with the change in State
- ReactJS errors with rendering basic html component via variable
- Rendering the functional component is not the same with class component in ReactJS
- setState is not setting state of an variable declared as empty array in class component of ReactJS
- How to avoid 'children with same key' when replacing state in ReactJs component
- Integrating Facebook Web SDK with ReactJS Component State
- Why is my react component not updating with state updates?
- Why getDerivedStateFromProps does not allow to re-render with the state update? Not a problem for componentWillReceiveProps - ReactJS
- React Dev Tools does not show Component Names or State Variable Names
- calling setState on a reactjs component with test utils not re-rendering component
- ReactJS children component lost its state when rendered with a different function
- ReactJS component state is not updating when any value in state array is modified
- reactjs rendering with state or props
- React Component not updating with state change
- React component not rendering inside .map with if statement
- ReactJS - SetState does not update the state when the state variable is a number
- Updated state not rendering in child component
- Unit testing async rendering in ReactJS component with Jest
- ReactJS component set state not doing anything?
- React component not rendering on state update
- Setting state in a subcomponent of react-table closes component resetting all states with ReactJS
- Why is the child component not updating with state of parent?
- Component is not re rendering when state is changed in react
- React JSX with component in variable does not sync props
- React/Redux - child component with Redux updates on some parent state changes, not on others
More Query from same tag
- Server-side React: Babel doesn't transform JSX on the server neither on the fly not manually. Why?
- Difference between .reduce() and .every() in JavaScript
- react accordion component collapse in another component
- How to play actions in a threejs object, loaded with useGLTF and showed with react three fiber
- react-redux: understanding communication between Provider and representational components
- console.log() above import statements in root file does not execute before import
- How to add active class on link click
- How to call inherited function in react child component
- Redirecting in the new React_router-dom v6
- React UseEffect is being calling twice
- Struggling to update list in object array
- Ckeditor disable auto inline won't disable inline from being selected on page load
- OwnProps Match and Params are undefined React-Router V3
- How do I render one of several of the same react component?
- how to do history.push for multiple parameter with multiple value (array) in react
- React: An component attribute is not properly storing the data (from a query) that I want
- React Redux using an object in the initialState
- React / Redux: Actions automatically get called whenever page change
- Why am I unable to use mockResolvedValue here?
- How to make Cards Component Responsive and inside Cards is align Center
- scroll function triggering before reaching end point?
- Passing Socket.io object between React components
- testing custom react methods with jest and enzyme
- Page becomes unresponsive and getting 404 error in the console
- custom hook for storing react hook refs to deal with stale closure problem
- Modal on react not working properly - Redux
- How to display an icon next to a Select element without obscuring the arrow
- How to add React components dynamically without reload?
- React color ChromePicker alpha slider does not work. Is required use Alpha individual API?
- How to incorporate both integration and unit testing in one test file using Cypress