i cant map usestate from AppContexet.Consumer - reactjs

Question

i send a usestate thro AppContexet.Provider to AppContexet.Consumer,
i can see at the components - the data arived but when i tray to map the state i get an erorr.
what m i doing wrong?
this is the perent :
import {useState} from 'react'
import Ex53Child from './Ex53Child'
import AppContexet from './Appcontext'
import React, {Component} from 'react';
const Ex53perent = ()=>
{
const [name,setName] = useState('')
const [age,setAge] = useState()
const [users,setUsers] = useState ([])
const [user,setUser] = useState ({name : '' , age : ''})
return(<AppContexet.Provider value = {{...users}}>
<div>
<h1> Ex53perent comp </h1>
Name: <input type = "text" onChange = {e=>setUser({...user ,name : e.target.value})}/><br/>
Age : <input type = "text" onChange = {e=>setUser({...user ,age : e.target.value})}/><br/>
<input type = "button" value ="Add" onClick ={e=>setUsers([...users,user])}/>
<Ex53Child/>
</div>
</AppContexet.Provider>
)
}
export default Ex53perent;
this is the child :
import {useState} from 'react'
import AppContexet from './Appcontext'
import Ex53GrenChild from './Ex53GrenChild'
const Ex53Child = ()=>
{
const [myUesr,setMyUser] = useState([])
return(<AppContexet.Consumer>
{
dataContext =>
(
<div>
<h1> Ex53Child comp </h1>
{
dataContext.users.map((item,index)=>
{
return<il key = {index}>
<li>{item.name}</li>
<li>{item.age}</li>
</il>
})
}
<Ex53GrenChild/>
</div>
)
}
</AppContexet.Consumer>
)
}
export default Ex53Child;
and this is the appcontext file:
import React from 'react'
const AppContexet = React.createContext();
export default AppContexet;
a singel value work just fine
but i cant map the arry from some resen

Answer 1

Issue
The users state is an array:
const [users, setUsers] = useState([]);
And you are spreading the array into an object:
<AppContexet.Provider value={{ ...users }}>
...
</AppContexet.Provider>
This makes the context value an object where the array indices are now object keys and the array values are object values.
Solutions
Convert context value to array
You could keep it this way, and then you'll need to convert the context value back to an array in the child:
<AppContexet.Consumer>
{dataContext => (
<div>
<h1>Ex53Child comp</h1>
{Object.values(dataContext).map((item, index) => {
return (
<il key={index}>
<li>{item.name}</li>
<li>{item.age}</li>
</il>
);
})
}
<Ex53GrenChild/>
</div>
)}
</AppContexet.Consumer>
Fix context value, keep it an array
It's better to just keep the users and context values consistently an array. Don't spread the users state into the context value.
<AppContexet.Provider value={{ users }}>
...
</AppContexet.Provider>
Now's the context value is an object with a single users property that is the users state.
<AppContexet.Consumer>
{dataContext => (
<div>
<h1>Ex53Child comp</h1>
{dataContext.users.map((item, index) => {
return (
<il key={index}>
<li>{item.name}</li>
<li>{item.age}</li>
</il>
);
})
}
<Ex53GrenChild/>
</div>
)}
</AppContexet.Consumer>
Use useContext hook
Since Ex53Child is a function component it's a bit silly to use the AppContexet.Consumer component render function. Use the useContext hook instead.
const Ex53Child = () => {
const [myUesr, setMyUser] = useState([]);
const { users } = useContext(AppContexet);
return (
<div>
<h1>Ex53Child comp</h1>
{users.map((item, index) => (
<il key={index}>
<li>{item.name}</li>
<li>{item.age}</li>
</il>
))}
<Ex53GrenChild />
</div>
);
}
Just pass users as a prop
Additionally, since Ex53perent is directly rendering Ex53Child, using the context is unnecessary complexity when the users state could just simply be passed as a prop.
const Ex53perent = () => {
const [name, setName] = useState('');
const [age, setAge] = useState();
const [users, setUsers] = useState([]);
const [user, setUser] = useState({ name: '', age: '' });
return (
<div>
<h1> Ex53perent comp </h1>
Name:{" "}
<input
type="text"
onChange={e => setUser({ ...user, name: e.target.value })}
/>
<br/>
Age:{" "}
<input
type="text"
onChange={e => setUser({ ...user, age: e.target.value })}
/>
<br/>
<input
type="button"
value="Add"
onClick={e => setUsers([...users, user])}
/>
<Ex53Child users={users} /> // <-- pass users as prop to child
</div>
);
};
...
const Ex53Child = ({ users }) => { // <-- access users from props
const [myUesr, setMyUser] = useState([]);
return (
<div>
<h1>Ex53Child comp</h1>
{users.map((item, index) => (
<il key={index}>
<li>{item.name}</li>
<li>{item.age}</li>
</il>
))}
<Ex53GrenChild />
</div>
);
}