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.