React's useContext doesn't pass down data from mongodb database to child components

I’m working on a simple MERN stack todo app using react hooks and contextAPI , I fetch the data from mongodb database using axios and set the initialState array variable with useEffect to simulate componentDidMount , then the initialState is used as a parameter to the useReducer . My problem is the child component doesn’t received the initialState but an empty array, however all other props such as disptach and loading variables get through.

Parent Component:

import React, { useEffect, useState, useReducer } from 'react';
import Header from './components/header/Header';
import Main from './components/main/Main';
import AppContext from './context/AppContext';
import axios from 'axios';
import './stylesheets/index.scss';

function App() {
  const [initialState, setInitialState] = useState([]);
  const [isError, setIsError] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  /* Fetch data */
  const fetchData = async () => {
    setIsError(false);
    setIsLoading(true);
    try {
      const response = await axios.get('/list');
      setInitialState(response.data);
    } catch (error) {
      setIsError(true);
      console.log(`Unable to get: ${error}`);
    }
    setIsLoading(false);
  };

  /* Post new data */
  const postNewData = async (parameter) => {
    setIsError(false);
    try {
      const response = await axios.post('/list', parameter);
      console(response.data);
    } catch (error) {
      setIsError(true);
      console.log(`Unable to post: ${error}`);
    }
  };

  /* Delete data */
  const deleteData = async (parameter) => {
    setIsError(false);
    try {
      const response = await axios.delete('/list', parameter);
      console(response.data);
    } catch (error) {
      setIsError(true);
      console.log(`Unable to delete: ${error}`);
    }
  };

  useEffect(() => {
    /* On load fetch data from the database */
    fetchData();
  }, []);

  useEffect(() => {
    console.log(initialState);
  }, [initialState]); 

  const appReducer = (state = initialState, action) => {
    switch (action.type) {
      case 'ADD_NEW_LIST':
        return postNewData(action.new_list);
      case 'DELETE_LIST':
        return deleteData(action.list_id);
      default:
        return state;
    }
  };

  const [appState, dispatch] = useReducer(appReducer, initialState);

  return (
    <AppContext.Provider value={{ appState, dispatch, isError, isLoading }}>
      <div className='App'>
        <Header />
        <Main />
      </div>
    </AppContext.Provider>
  );
}

export default App;

Here’s the child component inside the main component:

import React, { useContext, useEffect, useState } from 'react';
import AppContext from '../../context/AppContext';

function Listarea() {
  const { appState, isError, isLoading, dispatch } = useContext(AppContext);

    console.log(appState);
    console.log(isError);
    console.log(isLoading);

  return <div className='list-area'>list area here</div>;
}

export default Listarea;

And here’s the console.log ouput
consolelog

As you can see the data is present in the Parent component but not the child except the other props that is able to get in.

1 Like