how i should use react hook useState with post axios - reactjs

Question

I try call request post with hooks. Firstly, a call request post using this.setState and it working correctly
but I want to use a hook (useState) instead of setState and it doesn't work
code below working correctly
export default class AddShoes extends Component {
constructor(props) {
super(props);
this.state = this.startValue;
this.state.show = false;
this.shoesChange = this.shoesChange.bind(this);
}
startValue = {
brand: "",
model: "",
date: "",
price: "",
img: "",
};
shoesChange = (event) => {
this.setState({
[event.target.name]: event.target.value,
});
};
submitShoes = (event) => {
event.preventDefault();
const shoes = {
brand: this.state.brand,
model: this.state.model,
date: this.state.date,
price: this.state.price,
img: this.state.img,
};
axios.post("http://localhost:8080/api", shoes).then((response) => {
if (response.data != null) {
this.setState(this.startValue);
alert("added")
}
});
};
the second code below doesn't work
export default function AddShoes() {
const [values, setValues] = useState({
brand: "",
model: "",
date: "",
price: "",
img: "",
});
// const [show, setShow] = useState(false);
const handleSetInputs = (e) => {
setValues({ ...values, [e.target.name]: e.target.value });
};
const submitShoes = (event) => {
event.preventDefault();
axios.post("http://localhost:8080/api", values)
.then((response) => {
if (response.data != null) {
setValues(response.data);
alert("added!");
}
});
};
what I should change?

Answer 1

To just change one property from an state-object in React Hooks you have to do this:
setValues(prevValues => ({ ...prevValues, [e.target.name]: e.target.value }));

Answer 2

In the first example that works, you are resetting the state by calling this.setState(this.startValue)
In the second example, you are passing the result of the network request inside setValue setValues(response.data)
Create initialValues outside of AddShoes function component.
const initialValues = {
brand: "",
model: "",
date: "",
price: "",
img: "",
}
Now pass that into setValues inside submitShoes
const submitShoes = (event) => {
event.preventDefault();
axios.post("http://localhost:8080/api", values)
.then((response) => {
if (response.data != null) {
setValues(initialValues);
alert("added!");
}
});
};