React State Usage in New Version - reactjs

Question

I am new to react,
Currently we are using new version of react,
The new version of react state (Current Version):
class MyForm extends React.Component {
const [state, setState] = useState([]);
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
setState({[nam]: val});
}
render() {
return (
<form>
<h1>Hello {state.username} {state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={myChangeHandler}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={myChangeHandler}
/>
</form>
);
}
}
How to i define it in the old React.
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
age: null,
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
}
render() {
return (
<form>
<h1>Hello {this.state.username} {this.state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={myChangeHandler}
/>
</form>
);
}
}
I have used it similar to the old one but the age value in state is cleared when the name state is updated and viceversa

Answer 1

Issues
React hooks are only valid in functional components.
You are using an array for state when it's an object in old code.
Unlike class-based component's this.setState state updates are not shallowly merged, you need to manage this yourself.
There is no render method, the entire functional component body is the "render" function. Just return the JSX.
Solution
const MyForm = () => {
const [state, setState] = useState({ // <-- use object
age: null,
username: '',
});
const myChangeHandler = (event) => {
const { name, value } = event.target;
setState(state => ({
...state, // <-- copy previous state
[name]: val, // <-- update property
}));
}
return (
<form>
<h1>Hello {state.username} {state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={myChangeHandler}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={myChangeHandler}
/>
</form>
);
}

Answer 2

function MyForm() {
const [name, setName] = useState('');
const [age, setAge] = useState(0);
return (
<form>
<h1>Hello {state.username} {state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={(event) => setName(event.target.value)}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={(event) => setAge(event.target.value)}
/>
</form>
);
}