part 2 react hooks with objects and array

import React, { useState } from 'react';
import './App.css'
const App = () => {
const [name, setName] = useState({ fname: '', lname: '' })
return (
<div className="App">
<form>
<input type="text" value={name.fname} onChange={(e) => setName((prevstate) => ({ ...prevstate, fname: e.target.value }))} />
Fname is {name.fname}
<br />
<input type="text" value={name.lname} onChange={(e) => setName((prevstate) => ({ ...prevstate, lname: e.target.value }))} />

Lname is {name.lname}
</form>

{JSON.stringify(name)}

</div>
);
}

export default App;

onChange={(e) => setName((prevstate) => ({ ...prevstate, lname: e.target.value }))}

the ...prevstate above will merge current state to previous state

#working with ARRAY

import React, { useState } from 'react';

import './App.css'

const App = () => {

const [items, setItems] = useState([])

const addItem = () => {

setItems([...items, { id: items.length, value: Math.floor(Math.random() * 10) }])

}

return (

<div className="App">

<div><button onClick={addItem}>addtoArray</button></div>

<div>

<ul>

{

items.map(item => {

return <li key={item.id}>{item.value}</li>

})

}

</ul>

</div>

</div>

);

}

export default App;