score:3

Accepted answer

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>

codesandbox demo


Related Query

More Query from same tag