How to fix state variable contents not displaying - reactjs

Question

I'm working on building out a small application. Currently I'm stuck at trying to display the response given from my back-end.
I've been using this guide to implement a data fetching hook, and everything works except for trying to display the returned entries in a list.
Here is what my code in the component looks like:
import React, { Fragment, useState, useEffect } from "react";
import axios from 'axios';
function Search() {
const [zone, setZone] = useState('');
const [results, setResults] = useState({entries: []});
const [url, setUrl] = useState(
`http://localhost:4000/entries/view/`
);
useEffect(() => {
const fetchEntries = async () => {
const result = await axios.get(url);
setResults({entries: result.entries});
};
fetchEntries();
}, [url]);
return (
<Fragment>
<input type="text" value={zone} onChange={e => setZone(e.target.value)} />
<button type="btn-primary" onClick={() =>
setUrl(`http://localhost:4000/entries/view/${zone}`)
}>
Search
</button>
<ul>
{results.entries.map(item => (
<li key={item._id}>
<div>{item.entry_description}</div>
</li>
))}
</ul>
</Fragment>
);
}
export default Search;
And here is a sample of what the API response looks like:
{
"entries": [
{
"_id": "5d365d9af8b0625f345a8cea",
"entry_description": "Test ui",
"entry_time": "Now",
"entry_author": "Me",
"entry_zone": "12345",
"__v": 0
},
{
"_id": "5d367e3bbd8b13188c0d638b",
"entry_description": "Test still?",
"entry_time": "Now",
"entry_author": "Me",
"entry_zone": "12345",
"__v": 0
}
]
}
Current error message I'm receiving is:
The above error occurred in the <Search> component:
in Search (created by Context.Consumer)
in Route (at App.js:21)
in div (at App.js:14)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:13)
in App (at src/index.js:7)
Consider adding an error boundary to your tree to customize error handling behavior.
TypeError: results.entries is undefined
home.component.js:30
TypeError: results.entries is undefined
home.component.js:30
I really appreciate any help figuring out what is causing this.

Answer 1

You seem to be wrapping the api result in an array, whereas you just need to assign it to enteries
useEffect(() => {
const fetchEntries = async () => {
const result = await axios.get(url);
setResults({entries: result.entries});
};
fetchEntries();
}, [url]);

Answer 2

So I've got it working now, although I don't quite understand it. I used this code and changed some of the names to work with my variable names. I think the fix has something to do with the useEffect() dependency in this code including the query variable. In my original code, I combined them into a url, and then didn't also include the zone variable in the dependency.
Here's my final code:
import React, { useState, useEffect } from "react";
import axios from 'axios';
function Search() {
const [data, setData] = useState({ entries: [] });
const [query, setQuery] = useState('Enter zone');
useEffect(() => {
let ignore = false;
async function fetchData() {
const result = await axios('http://localhost:4000/entries/view/' + query);
if (!ignore) setData(result.data);
}
fetchData();
return () => { ignore = true; }
}, [query]);
return (
<>
<input value={query} onChange={e => setQuery(e.target.value)} />
<ul>
{data.entries.map(item => (
<li key={item._id}>
<p>{item.entry_description}</p>
</li>
))}
</ul>
</>
);
}
export default Search;