React hooks context component doesn't re-render when context state changes

Question

I am working on a react app that should allow a user to browsers records from a database one page at a time.

I am using functional components and react context to manage state. I have a useEffect that will pulls a function from my Context to fetch records from the database and puts them into the Context State. The component pulls the array of records from the Context State and if they is at least 1 (array length > 0) it will map the array using each record to populate a record list item component.

The data is pulled and the React Dev Tools shows that the data is in the Context. I can console log the records array (with records) to the console and I can even log the list of

elements that are the Record List Item Components to the console, but the page always show the "No Records Found" message that you should get if the array is empty (length of 0).

The main component is:

 <ul className="list-group"> { records.length > 0 ? (records.map((rec) => <RecordListItem record={rec}/>)) : (<li className="list-group-item">No Records Found</li>) } </ul>

the useEffect in the RecordsList is:

 const { filter, getRecords, page, perPage, records, } = useContext(RecordsContext); useEffect(() => { const start = (page - 1) * perPage; getRecords(start, perPage, filter); // filter, page, and perPage come from the Context }, []); // only want this useEffect to run once when the component loads.

getRecords is a function that queries the database for records starting from one record and going up to the number of records per page.

 const getRecords = async (start, limit, filter) => { if (filter) { const items = await db("contacts").select() .where({status: filter}) .offset(start).limit(limit); } else { const items = await db("contacts").select() .offset(start).limit(limit); } dispatch({type: SET_RECORDS, payload: items);

The records are showing up in the dev tools and in the console logs. I am not seeing a problem with the database connection or queries.

The only problem I am seeing is that the component doesn't update when the state inside the context changes. This is only happening with this one element. Other state values are changing and the components that use them are updating.

For example. When the filter is picked the number of records updates to reflect the total number of records with that filter. Adding, updating, and deleting records in the database also cause these numbers to update when the components are refreshed.

I have another useEffect that will trigger when the page or perPage changes and another that resets the page to 1 and getsRecords again when the filter changes. Both of these useEffects are currently not in the code to avoid them causing issues.

The Parent Component is the RecordsViewer. This is simply just a shell to hold the other elements in. It creates a Navbar at the top that gives filter options as well as paging and items per page options and a section with a container

The RecordsList is a card that contains the List-Group element and gets the data from the Context. It then maps over the fetched records and passes each record to a display component.

The RecordsContextProvider wraps the RecordsViewer and I can see the data in the Context within the React Dev Tools. Also doing a console.log(records) does show an array of the correct number of items. I have tried capturing the map of records in a value and then showing that, but no change. I can console.log that variable and see it is an array of react elements of type "LI".

I am completely lost as to what the hang up is here.

Answer 1

I've found the issue. Misspelled length as lenght in the condition to check if the array was empty or not.

What I get for trying to work after less than 5 hours of sleep.