javascript - Cant access props in react application showing undefined

Question

So when I am passing props from one of my Next Js pages to my component I can console log the props and it contains the data I want which I then pass down the tree to various components but I can't log out the child elements of the props as they are appearing as undefined. Probably has something to do with fetch and its asynchronous behaviour.

Any help.

Next Js page:

import React, { useContext } from 'react';
import Layout from '../components/globals/Layout';
import components from '../static-data/components';
import IncludeComponents from '../include-components';
import DataContext from '../DataContext';
import StoreDirectory from '../components/StoreDirectory';

const Stores = (props) => {
    const { pageData } = useContext(DataContext);

    return (   
        <Layout>
            <StoreDirectory props={props}/>
            {/* <IncludeComponents components={pageData.storesPage} /> */}
        </Layout>
    )
}

export async function getStaticProps() {

    const resStores = await fetch("http://caladonia-park-cms.betastaging.co.uk/wp-json/wp/v2/stores")
    const storesData = await resStores.json();

    const resStoresCategorys = await fetch("http://caladonia-park-cms.betastaging.co.uk/wp-json/wp/v2/store-category")
    const storesCategorysData = await resStoresCategorys.json();

    return {
        props: {
            storesData,
            storesCategorysData
        }
    }
}

export default Stores;

StoreDirectory:

import React, { useRef } from 'react';
// import { data } from './data/data';
import { useState, useEffect } from 'react';
import Form from 'react-bootstrap/Form';
import ScrollToTop from './ScollToTop';

const DropDown = (props) => {
    console.log(props.storesData.id)

    const [storeCategorys, setStoreCategories] = useState(props.storesCategorysData);
    const [initialValues, setInitialValues] = useState(props.storesData);

    const handleOnchange = (event) => {
        const filter = event.target.id;
        const initialState = [...initialValues]
        setValues(initialState.filter(store => 
            {return (store.store-category.indexOf(filter) >= 0)}
        ));
    }

    const defaultSelectMessage = 'select a category';

    return (
        <Form>
            <Form.Group controlId="exampleForm.SelectCustom">
            <Form.Label>Custom select</Form.Label>
            <Form.Control defaultValue={defaultSelectMessage} onChange={(e) => handleOnchange(e)} as="select" custom>
                <option hidden disabled value={defaultSelectMessage}>{defaultSelectMessage}</option>
                {storeCategorys.map((item, index) => (
                <option id={item.id} key={index}>{item}</option>
                ))}
            </Form.Control>
            </Form.Group>
        </Form>
    );
}

const Filter = (props) => {
    return (
        <div>
            {props.alphabet.split("").map((c, i) => {
                return (
                    <>
                    {props.filteredValues
                    .filter(store => store.title.rendered.startsWith(c)).length === 0 
                    ? <h1 ref={ el => props.itemsRef.current[i] = el } className={'Grey'}>{c}</h1>
                    : <h1 ref={ el => props.itemsRef.current[i] = el } className={'notGrey'}>{c}</h1>   
                    }
                    
                    {props.filteredValues
                    .filter(store => store.title.rendered.startsWith(c))
                    .map((item, index) => (   
                        <li key={index}>{item.title.rendered}</li>
                    ))}
                    
                    </>
                );
            })}
        </div>
    );
}

const AlphaButtons = (props) => {

    const alphabet = "abcdefghijklmnopqrstuvwxyz";
    const alphabetIntoArray = alphabet.split("");

    const itemsRef = useRef([]);

    useEffect(() => {
        itemsRef.current = itemsRef.current.slice(0, alphabetIntoArray.length);
    }, [alphabetIntoArray])

    const goToSelection = (event, index) => {
        if(itemsRef.current[index]) {
            itemsRef.current[index].scrollIntoView({
            behaviour: "smooth",
            block: "nearest"
            })
        }
    }

    return (
    <>
        {alphabet.split("").map((item, index) => (
            <button key={index} onClick={(e) => goToSelection(e, index)}>{item}</button>
        ))}  

        <Filter filteredValues={filteredValues} alphabet={alphabet} itemsRef={itemsRef}/>    
    </>
    )
}

const StoreDirectory = (props) => {
    const [filteredValues, setValues] = useState(props.storesData);

    console.log(props)
    

    return (
        <>
            <DropDown props={props}/>
            <AlphaButtons filteredValues={filteredValues}/> 
            <ScrollToTop />
        </>
    )

}

export default StoreDirectory;

I can log the props in here but when i try accessing the children nothing.

question from:https://stackoverflow.com/questions/65922458/cant-access-props-in-react-application-showing-undefined

Answer 1

Waitting for answers