Menu in React.js

Question

I want to Make Calculator NavBar Menus and to link them to various Components

Like

Home Addition Subtraction

How do I achieve in React.JS

I have added Components in Apps.js for Navbar but could not figure out other components to link

Please advice Regards

Answer 1

You can easily achieve this type of menu by making a custom component with the name DropDownMenu or whatever you like to name it. let's have look at this pseudo code example.

 // array = [ {text : 'add' , onClick = () => {} } ]
 function DropDownMenu (props) { 
  return ( <>{props.array && props.array.map((child , idx) => 
             <DropDownChild text = {child.text} onClick = {child.onClick} 
          /> ) </> 
       )
 }

function DropDownChild (props) {
   return ( <><a onClick = {props.onClick} >{props.text}</a> )
}

Don't Forget to add styling https://react-bootstrap.github.io/components/dropdowns/