score:3
your components are not actually tied to your state values. you need them to be "controlled." check out the docs for more examples :)
https://reactjs.org/docs/forms.html#controlled-components
<input value={newname} onchange={event => setnewname(event.target.value)} />
score:1
you have missed adding value
attribute to input
and thus your component is not the "controlled" component.
you can read more here.
changes needed
<input
value={newname}
onchange={event => setnewname(event.target.value)}
/>
<br />
phone:
<input
value={newnumber}
onchange={event => setnewnumber(event.target.value)}
/>
codesandbox link: https://codesandbox.io/s/crimson-frog-ecp98
hope this helps!
score:2
the reset is working correctly. what you forgot to do is add the value
to each input. without the value
attribute the input is considered an uncontrolled component. by the sounds of it, you're looking to control the value via code.
change
<div>
name: <input onchange={event => setnewname(event.target.value)} />
<br />
phone: <input onchange={event => setnewnumber(event.target.value)} />
</div>
to
<div>
name: <input value={newname} onchange={event => setnewname(event.target.value)} />
<br />
phone: <input value={newnumber} onchange={event => setnewnumber(event.target.value)} />
</div>
Source: stackoverflow.com
Related Query
- React hooks function component prevent re-render on state update
- React Hooks - function inside function component passed as prop can't access state
- React hooks: Can't update state inside function component
- state won't update inside react function component
- React Hooks: Instantiating state hooks on validation Error: Invalid hook call. Hooks can only be called inside of the body of a function component
- React onSubmit wait for async IIFE inside the function to update state with hooks
- React Hooks Error: Hooks can only be called inside the body of a function component
- React Warning: Cannot update a component from inside the function body of a different component
- Function inside functional component in React hooks - Performance
- How do I pass all state variables inside react hooks to my child component
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- React Native : Access Component state inside a static function
- React + Antd + Rollup Component Library "Error: Invalid hook call. Hooks can only be called inside of the body of a function component"
- React Hooks can only be called inside the body of a function component
- React 17.0.1: Invalid hook call. Hooks can only be called inside of the body of a function component
- Receiving error - Hooks can only be called inside of the body of a function component when implementing React Spring basic example
- export function inside react component or access state in same file outside of component
- React Hooks Mobx: invalid hook call. Hooks can only be called inside of the body of a function component
- Waiting for react state to update in function component
- Avoid Refreshing function inside a component during state update
- React hooks not returning updated state values inside callback function from library events (FabricJS)
- React testing library: An update inside a test was not wrapped in act(...) & Can't perform a React state update on an unmounted component
- React useHistory: Hooks can only be called inside the body of a function component
- How to update state inside an addListener React Class Component
- how do i update state in react for updating the value of an object inside an array using array.map function
- Can't perform a React state update on an unmounted component problem in Interval function
- Passing a function as a prop to update state in parent component in react
- React Redux-Toolkit: Invalid hook call - Hooks can only be called inside of the body of a function component
- React call from class to functional component. Error: Invalid hook call. Hooks can only be called inside of the body of a function component
- Updating component state by Listening to socket events inside react hooks or handling them inside middleware? what are the downsides of each one?
More Query from same tag
- Why does react-select not output anything while there is an object array available?
- React Current Image in Image Gallery
- React render array of images in array
- Load config in the global window object
- How to make CSS grid working in react with CSS modules stylesheet
- Map undefined when working with reddit json
- Mark as true if one of the two radio buttons are checked
- Reusing websocket connection object in Redux Saga
- How to set up redux-persist with middlewares properly?
- Rails is seeing a post request as a get, with a react front end
- How can I make fetch calls to two different APIs and match the username from the first one to the respective username of the 2nd one?
- How can i outsource functions that use state and do setState
- Is there any way to know the useParams from the top container?
- why are stateless component eating memory
- Favicon not displaying in most browsers and shows odd src path. React + Express Server
- Parse nested HTML that's within a string in React?
- fireEvent is calling Found multiple elements by: data-testid error in react-testing-library
- Why won't React production build run on the browser?
- Immutable Update React Hooks Array Object
- How do I make an element filter in React?
- How can I setState on two array elements at once?
- React Three Fiber equivalent of scene.add() - 2D Text Sprites with React Three Fiber
- Reach Router Cannot read property 'apply' of null
- Control a WebView object in Electron with typescript
- componentWillReceiveProps method doesn't run anymore when using redux to call api
- How to add solid round dot in rechart
- ternary operator inside map
- Search result pagination with React JS
- Route parameters with a new path
- How to reset a contenteditable element in React?