I am getting cannot read properties of undefined (reading 'map') error. I am simply trying to access the array data.js in my Form.js component and map over the properties. But it is saying the data is undefined when I console.log. I set my data to reviews state default. Then I passed the state variable reviews to the value props so Form.js can access it. Any help is appreciated.

context.js

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

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
    const [reviews, setReviews] = useState(data);
    const [isLoading, setIsLoading] = useState(true);

    return <AppContext.Provider value={reviews}>{children}</AppContext.Provider>;
};

export const useGlobalContext = () => {
    return useContext(AppContext);
};

export { AppContext, AppProvider };

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { AppProvider } from './context';

ReactDOM.render(
    <AppProvider>
        <App />
    </AppProvider>,
    document.getElementById('root')
);

App.js

import React, { useState } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import './App.css';
import Home from './Home';
import Form from './Form';

const App = () => {
    return (
        <Router>
            <Route exact path='/'>
                <Home />
            </Route>
            <Route path='/form'>
                <Form />
            </Route>
        </Router>
    );
};

export default App;

Form.js

import React from 'react';
import { Link } from 'react-router-dom';
import { useGlobalContext } from './context';
const Form = () => {
    const { reviews } = useGlobalContext();
    console.log(reviews);
    return (
        <section>
            {reviews.map((review) => {
                return <h2>It is working!</h2>;
            })}
        </section>
    );
};

export default Form;

data.js

const reviews = [
    {
        id: 1,
        name: 'susan smith',
        job: 'web developer',
        image:
            'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg',
        text: "I'm baby meggings twee health goth  1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
    },
    {
        id: 2,
        name: 'anna johnson',
        job: 'web designer',
        image:
            'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg',
        text: 'Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.',
    },
    {
        id: 3,
        name: 'peter jones',
        job: 'intern',
        image:
            'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg',
        text: 'Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.',
    },
    {
        id: 4,
        name: 'bill anderson',
        job: 'the boss',
        image:
            'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg',
        text: 'Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ',
    },
];

CodePudding user response：

You should not destructure your context, you're simply assigning an array to it, so it's just

const reviews = useGlobalContext()

Also it's always good idea to assign some initial context values so you can debug things like that more precisely or further implement some logic for placeholders etc.

CodePudding user response：

try this

const AppContext = React.createContext(
    /*here u should set default value as empty array or data object.*/
)

initial value of context is undefined so you are getting the error and access like this

const reviews = useGlobalContext()