score:3
you can resolve this by using a ternary operator for the value property. see working sandbox: https://codesandbox.io/s/blissful-clarke-l2pif
<input
value={params["data"] ? params["data"] : ""}
onchange={(e, { value }) => {
this.buildparams("data", value);
}}
/>
this will work because it forces the semantic-ui tag to conditionally check for the value in our state, instead of using a static binding like params.data
. if there is a data
property in the object, then we will use its value. if not, then display an empty string.
the value used by the input is controlled at all times and will not be retained when reverting params
to {}
. i'm assuming you can swap data with a specific name
or key
corresponding to each input.
score:1
calling this.setstate({params:{}})
will set the params
to an empty object on the state. to verify you can log the new state in the callback:
this.setstate({params:{}}, () => console.log(this.state)) // {params: {}}
edit: looking at the updated question, the issue you're having is that your state is connected to the input via this.state.params.data
. in this case when you set the state params
to an empty object, the value of input will be set to undefined
and you'll get a warning: a component is changing a controlled input of type text to be uncontrolled.
in this case your default state has to look like this:
this.state = {
params: {data: ''}
}
and the reset method:
revertstate = () => {
this.setstate({
params: {data: ''}
});
};
alternatively you can make your input uncontrolled by removing value
prop, but in that case you won't be able to modify it directly.
Source: stackoverflow.com
Related Query
- ReactJS setState to blank object not working
- ReactJS Array.push function not working in setState
- setState inside constructor not working properly: ReactJS
- Using useState of complex object not working as expected in ReactJS
- ReactJS can not access response object inside setState
- ReactJS Imports not working blank webpage
- setState not working for array reactjs
- Reactjs pass value as prop after setState not working
- ReactJS : Object updating in setState but not reflecting in UI
- ReactJs dynamic setState not working in for loop
- setState not working for objects inside the this.state in ReactJs
- Reactjs setState not working
- setState key with dynamic index not working - ReactJS
- Reactjs submit form and setState not working first time
- Javascript, ReactJs setState not working
- Map fuction on JSON object not working in ReactJS
- ReactJS Bootstrap Navbar and Routing not working together
- ReactJS Router V4 history.push not working
- Inline style is not working ReactJS
- clearInterval is not working in reactjs
- Reactjs - Demo Application is not working
- PrivateRoute not working in reactjs react-router-dom
- reactjs chrome extension message passing not working
- React setState not working on first try, but works on second?
- ReactJS - setState of Object key in Array
- export default not working webpack, reactjs
- ReactJS SetState not rerendering
- cookies.remove('abc') not working in reactJs
- Simple ReactJs Example not working
- setState not working for updating an array in React
More Query from same tag
- Trying to select menuItems in a seperate component - how to solve 'function components cannot be given refs' error?
- React method return value won't show in render()
- Need help on passing API data into components
- How to pass data into options in <Form.Select> </Form.Select> with Semantic UI React?
- General problems with Google Optimize in React / Next.js
- State set in WillMount() not accessible in DidMount()
- How to change className to element after click on another element in React
- Use Link tag and pass data in react
- Redux child not updating parent component state
- Next.js getStaticPaths
- No overload matches this call, on style attribute in jsx typescript
- Curly braces inside array destructuring in return from a function
- React Redux not updating state despite login working fine
- How to read the zip file contents in react application using jszip preferably
- How to retrieve and display images in reactjs that are stored on the server side using multer and the path is stored in the database
- React App - createProxyMiddleware is not a function
- css fontawesome icon align with two text line inside a button ReactJS
- A*(A-star) algorithm gives wrong path and crashes
- Expressjs cors issue when fetching from different origin
- How To update react redux state
- Sign in API end point wont get invoked unless you clear the browsers cache and then reload the page
- Return and display data, but with condition
- adding active class bootstrap carousel at repeat data just on first key in react app
- How to set environment variables on React with custom webpack
- Image source from database cannot display the image on react app
- React - When using Hooks, I get an error - Object is not iterable (cannot read property Symbol (Symbol.iterator))
- To loop over an image folder and display all images using React Js
- How can I create an effective private route using the latest version of react-router-dom
- React updating a setState with a callback to a useState hook
- NextJS load external image Amazon