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;