Amazon clone in React - side menu

JavaScript
#1

Hey guys!

So I have started creating an amazon clone and I am having a bit of a problem with amazon side menu (the on that shows when you click on the burger icon).

At the moment I did that much:

  • It’s a functional component.
  • Menu shows on the click of the button (have separate close button as well)
  • You can navigate through it - It has 4 working buttons of “Categories” type. Those buttons are created from an array of objects :
const categories = [
		{
			"name": "Electronics",
			"subCat": ["Desktop PC","Consoles","TV"]
		}
	]

There is 3 more objects, don’t want to spam all of it here :slight_smile: They are constructed exactly the same. So the 4 buttons I have mentioned earlier are created within return statement:

<div className="navbar-secondary-part1" >
	<ButtonGroup 
		color="primary" 
		orientation="vertical" 
		fullWidth={ true } 
		variant="text">
			{categories.map(category => {	
					return(
						<Button 
						onClick={ navigate } 
						key={ uuid() } 
						value={ category.name }>
						{ category.name }
						</Button>
					)
			})}
	</ButtonGroup>
<div>

This is part 1 out of 2 in the menu. Next sibling is “navbar-secondary-part2” and my goal is to render sub-category buttons (subCat in the categories array - in this case desktop pc, consoles and tv) in part2 after user chooses the category he wants to browse. How can I do it?

I tried using state from useState hook, but it won’t work as it needs to wait for user to choose category, so it just shows error.
Also I know I could use react router, but that means I would need to rework a lot of it, unless that’s the best option?

Thanks in advance for any advice :slight_smile:

Pawel

#2

Hello there,

I am not sure if I have understood correctly. So, if this is off-track, let me know.

What you have is:

  • A list of buttons (nav-items), acting as top-level (parent) elements

What you want to add is:

  • Once a parent is selected, replace current nav-view (ButtonGroup) with the relevant list of buttons (children nav-items)

I would have coded this something like:

const [childrenItems, setChildrenItems] = useState([]);

const handleParentClick = (category) => {
  setChildrenItems(categories.find(parent => parent.name == category).subCat);
}

<navbar>
  {childrenItems ? childrenItems.map(...logic to render children)
    : categories.map(...what you already have for parents)}
</navbar>

That is very rough, but I think it outlines the idea.

Hope this helps

1 Like
#3

Thanks man, exactly what I was looking for! Before I have tried a function that was something like that:

if(!state) {
      return null;
}else {
      render buttons logic

but that didn’t work. Now I have reduced it to this:

	{state ? state.subCat.map(cat => {
		return(
			<Button	key={ uuid() }>{ cat }</Button>)
	}) : ""}

And it works like a charm :slight_smile: Now, can I do something like that?:

	{state ? state.subCat.map(cat => {
		return(
			<Route> 
					<Button	key={ uuid() }>{ cat }</Button>)
			</Route>
	}) : ""}

I want to route those buttons with React Router, would that work?

#4

This is not how I have seen react-router being used. I would replace the Route and Button component here with a Link component.

#5

Hmm I am getting a bit confused because this guy:

Has a tags, to route his components, why should I use links?

#6

The best-practice i am aware of is:

  • If it links to somewhere internally (within your site), use Link
  • If it links to somewhere outwith your site, use a tags

Hope this helps

1 Like
#7

Awesome, thanks man ! :slight_smile: I will use Links in this case :slight_smile:

1 Like