Need to access the state from another .js file in React

I’m working on building an e-commerce website in React. In which, there will be a navigation bar with all the categories and once a user clicked on a specific category, it will render all the products that belongs to the same category in the same page. In the project I have two .js file which are NavBar.js where it contains all the stuff for the navigation bar and AllItems.js where all products are rendered.

NavBar.js code

function NavBar() {

const [allCategories, setAllCategories] = useState([])
const [currency, setCurrency] = useState([])

useEffect(() => {

    fetchAnyQuery(
        `
        query{
            categories{
            name
            }
        }
    `).then(data => {
        setAllCategories( data.data.categories )
    })
},[])

// for currency options
useEffect(() => {

    fetchAnyQuery(`
        query{
          currencies
        }
    `
    ).then(data => {
        setCurrency(data.data.currencies)
    })
},[])


return (
    <nav id = "NavBar">
        <div id="NavBar-content">

            <div className = "leftSide" id = "leftNav">

                {allCategories.map((allCategories, index) => {

                    if (index == 0){
                        // return a checked tab

                        return(
                            <>
                                <input className='radio-category' id={allCategories.name} type='radio' name="nav" checked/>
                                <label htmlFor={allCategories.name} className='category-label'><h5 className="tab-text">{allCategories.name.toUpperCase()}</h5></label>
                            </>
                        )

                    }
                    else {
                        // return unchecked tab

                        return(
                            <>
                                <input className='radio-category' id={allCategories.name} type='radio' name="nav" />
                                <label htmlFor={allCategories.name} className='category-label'><h5 className="tab-text">{allCategories.name.toUpperCase()}</h5></label>
                            </>
                        )
                    }

                })}
            </div>

            <div className = "centerSide">
                <a href="/">
                    {/*<img src={logo} />*/}
                    Logo
                </a>
            </div>

            <div className = "rightSide">

                <select className="currencySelector" id="currencySelector">

                    {currency.map((currency, index) =>{

                        return(
                            <option value={ JSON.stringify(currency.indexOf(index)) } >   {getSymbolFromCurrency(currency.toString()) + " " + currency.toString()} </option>

                        )
                    })}
                </select>
            </div>
        </div>
    </nav>
);

}

export default NavBar;

AllItems.js code where all the products will get rendered

function AllItems() {

// The state that I want to use in NavBar.js
const [category, setCategory] = useState([])

useEffect(() => {

    fetchAnyQuery(
        `
            query{
                categories{
                    name
                    products{
                        name
                        id
                    }
                }
            }
    `
    ).then(data => {
        
        // Here I'm trying to do all  the required stuff

        var tabs = document.getElementById("leftNav")
        var selectedTab  = document.querySelector('input[name="nav"]:checked').id
        setCategory(selectedTab)
        console.log(selectedTab)

    })


},[category])

return (
    <div className="itemContainer" id="itemContainer">

    </div>
)

}

export default AllItems;

State, by definition is in reference to a specific component. It is internal to that component.

But this is a common problem. There are various techniques, like “lifting up state” to a common ancestor. You can also use React context. There are also libraries like redux.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.