Lose state in React Js - reactjs

Question

I have an application with 2 inputs; name and password. Also, I have a save button that should change the state, using the values from the inputs, in the parent component.
But now, if I insert just one value in one input, I lose the state in the parent component. For example, if I type just name, and click save button, in the parent component I lose the password value, but I don't know why.
How to avoid this using my code?
import React, { useEffect } from "react";
import "./styles.css";
const Test = ({ user, setUser }) => {
const [u, setU] = React.useState("");
const [p, setP] = React.useState("");
function name(e) {
const a = e.target.value;
setU(a);
}
function password(e) {
const a = e.target.value;
setP(a);
}
function save() {
console.log(u);
setUser({ ...user, name: u, password: p });
}
return (
<div>
<input onChange={name} />
<input onChange={password} />
<button onClick={save}>save</button>
</div>
);
};
export default function App() {
const [user, setUser] = React.useState({
name: "",
password: ""
});
useEffect(() => {
setUser({ name: "john", password: "Doe" });
}, []);
return (
<div className="App">
<p>{user.name}</p>
<p>{user.password}</p>
<Test user={user} setUser={setUser} />
</div>
);
}
code link: https://stackblitz.com/edit/react-ytowzg

Answer 1

This should fix your issue:
function save() {
console.log(u);
if(u === '') {
setUser({ ...user, password: p });
} else if (p === '') {
setUser({ ...user, name: u });
} else {
setUser({ ...user, name: u, password: p });
}
}
So, now the state is conditionally updated based on the values of the input fields. The issue with your code is that you're always overwriting the state regardless of the input values.

Answer 2

i have a better proposition,instead of using a separate state variable for name ,password and percentage use a single state variable object
Test.js
import React, { useState } from "react";
import { InputNumber } from "antd";
import "antd/dist/antd.css";
const Test = ({ user, setUser }) => {
const [state, setState] = useState({
name: "",
password: "",
percentage: ""
});
function onChange(e, name) {
setState({
...state,
...(name === undefined
? { [e.target.name]: e.target.value }
: { [name]: e })
});
console.log(state);
}
function save() {
setUser({
...user,
...(state.name !== "" && { name: state.name }),
...(state.password !== "" && { password: state.password }),
...(state.percentage !== "" && { percentage: state.percentage })
});
}
return (
<div>
<input name='name' onChange={onChange} />
<input name='password' onChange={onChange} />
<InputNumber
defaultValue={100}
min={0}
max={100}
formatter={value => `${value}%`}
parser={value => value.replace("%", "")}
onChange={e => onChange(e, "percentage")}
/>
<button onClick={save}>save</button>
</div>
);
};
export default Test;
Updated CodeSandbox here