nu.js | Note Utilities Library

I have build a profile page which should render the content of the component by getting the user_id from the URL using react router.

This works quite fine.

But....

If I open any profile page by changing the URL and then click on my menu item to bring me back to the current users profile page it won't re-render the content of the component. But the URL of the browser changes.

I am new to React js. I am implementing the drawer (material-ui), so when user clicks on left menu (LeftMenu.jsx); the respective component should get render in the center (i.e, MainContent.jsx)

Unfortunately, I am getting following error: Error: Invariant failed: You should not use outside a But if I enclosed Link in LeftMenu.jsx then URL changes but view does not get render.

I tried the solutions given in React router changes url but not view but still the problem is not solved.

Following are the list of components:

Status.jsx

problem(showing in console)

I'm trying to render the selected li (mapped in a child component) in an another child component. So you have the following structure (very simple):

Parent Component (Parent.JS)

• ➥ First Child called Title.JS (that should render the title selected from the Second Child, which will contain the menu)
• ➥ Second Child called Menu.JS (which contains the menu)

The exercise I'm trying to do and to understand here, is how to pass data(s) between children using props (in case the value goes through the parent).

Parent.JS

I have a section class which creates a section . I'm using pizzaMenu class to render each pizza item from data.json file on UI. The code seems correct to me and should render the pizza items but it doesn't. Following is the code.
I get

Link: https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&hidenavigation=1&theme=dark

App.js

I have the following JS code here:

Hello I'm having a small error on my website. I'd like to host the website using github so I linked my scripts in my HTML like this:

Here I have an image of the current header render. The headercomprises of a HeaderMenu and 3 Links. The links are working fine, but the HeaderMenu is causing the links to fall below it. HeaderMenu contains a div which wraps a Button and Popper, acting as a dropdown menu.

I'm also not sure if this design structure is correct, but for the styles, I have one styles.js file which I pull from. I then pass these styles down as props to the smaller components for rendering. That's why the components here have a props classes that comes from useStyles in index.js.

Header.js

I've got a React problem. I'm trying to add an array of objects to my App.js file and to use the map method. But for some reason there is an error message - .map is not a function. What can I do to fix it?

App.js file: