Access Data in nested JSON API Object in react - reactjs

Question

I have this Data in a JSON-Api but my react app does not want to let get the values from the nested Objects.
[
{
"_id": "61715a5351b12fadc073940a",
"name": "Betty",
"owner": {
"_id": "614323ed282bfd3e68bbaf4f",
"name": "Kirk Douglas",
"email": "kirk#example.com",
"__v": 0
},
"addressText": "Some cool street",
"addressNumber": "91",
"zipCode": "34567",
"city": "Washington"
"__v": 0
},
{
"_id": "61715cf92bb6de6eca7e10f8",
"name": "Jeremy",
"owner": {
"_id": "614323ed282bfd3e68bbaf4f",
"name": "Paul Bettany",
"email": "paul#example.com",
"__v": 0
},
"addressText": "Another street",
"addressNumber": "233",
"zipCode": "09234",
"city": "New York",
"__v": 0
}
]
My code for the react component looks like this.
const BarrelDetails = () => {
const { id } = useParams();
const { data: barrel, error, isPending } = useFetch('localhost:8000/api/barrels/' + id);
const history = useHistory();
// const handleClick = () => {
// fetch('http://localhost:8000/api/barrels' + barrel.id, {
// method: 'DELETE'
// }).then(() => {
// history.push('/');
// })
// }
return (
<div className="content">
<div className="barrel-details">
{ isPending && <div>Loading...</div> }
{ error && <div>{ error }</div> }
{ barrel && (
<div>
<h2>{ barrel.title }</h2>
<p>Ansprechpartner { barrel.owner }</p>
<p>Standort: { barrel.city }</p>
<Bookbarrel />
</div>
)}
</div>
</div>
);
}
export default BarrelDetails;
It displays the barrel.owner id, but nothing else.
I also have the problem that i cannot access the data from my main List anymore...
I was using a useEffect hook, and passing data down to a list, but this did not work anymore.
useEffect(() => {
fetch('https://devsauna.de/api/barrels/')
// fetch('http://localhost:8000/api/barrels')
.then(res => {
if (!res.ok) {
throw Error('Could not fetch the data for that resource');
}
return res.json();
})
.then(data => {
setBarrels(data);
setError(null);
setIsPending(false);
})
.catch(err => {
setIsPending(false);
setError(err.message);
});
}, []);
I get the Error Error: Objects are not valid as a React child (found: object with keys {_id, name, email, __v}). If you meant to render a collection of children, use an array instead.

Answer 1

Your data is an array of objects, so you need to map it.
barrel && barrel.map(item => {
return <div>
<h2>{ item.title }</h2>
<p>Ansprechpartner { item.owner }</p>
<p>Standort: { item.city }</p>
<Bookbarrel />
</div>
})