Getting a navbar to work in React. Sending a function to a child through props?

Question

I currently have the following code in my App component. Rather that having the Navbar nested in my App component directly is there a way to have a separate navbar.js file with with the Navbar component that is passed the "setshow()" function through props. Then through the onClick can still change what is rendered in "show" the Parent App function.

import React,{ useState } from 'react';
import Home from './components/Home'
import Selfdev from './components/Selfdev'
import Webdev from './components/Webdev'


function App() {


  const [show,setshow] = useState(<Home/>)

  return (
    <div className="App">
     <div id="Navbar" className="">
      <div onClick={() => setshow(<Home/>)} className="cursor-pointer">Home</div>
      <div onClick={() => setshow(<Webdev/>)} className="cursor-pointer">Webdev</div>
      <div onClick={() => setshow(<Selfdev/>)}>Selfdev</div>
    </div>
    {show} 
    </div>
  );
}

export default App;

Answer 1

You could have something like this:

 const Navbar = ({ setshow }) => (
  <div id="Navbar" className="">
    <div onClick={() => setshow(<Home />)} className="cursor-pointer">
      Home
    </div>
    <div onClick={() => setshow(<Webdev />)} className="cursor-pointer">
      Webdev
    </div>
    <div onClick={() => setshow(<Selfdev />)}>Selfdev</div>
  </div>
)

function App() {
  const [show, setshow] = useState(<Home />)

  return (
    <div className="App">
      <Navbar setshow={setshow} />
      {show}
    </div>
  )
}

I am not sure if your question is based on different Navbar semantics, or are you just interested in passing the props to the Navbar component like in the example above?

In order to separate the Navbar into its own file, do the following:

Create Navbar.js :

import React from 'react'

import Home from './components/Home'
import Selfdev from './components/Selfdev'
import Webdev from './components/Webdev'

const Navbar = ({ setshow }) => (
  <div id="Navbar" className="">
    <div onClick={() => setshow(<Home />)} className="cursor-pointer">
      Home
    </div>
    <div onClick={() => setshow(<Webdev />)} className="cursor-pointer">
      Webdev
    </div>
    <div onClick={() => setshow(<Selfdev />)}>Selfdev</div>
  </div>
)

export default Navbar

And then modify your Main file like this:

import React, { useState } from 'react'

import Navbar from './Navbar'
import Home from './components/Home'

function App() {
  const [show, setshow] = useState(<Home />)

  return (
    <div className="App">
      <Navbar setshow={setshow} />
      {show}
    </div>
  )
}

export default App

also, in JS it is prefered to use camelCase , so instead of setshow you would have setShow - just a tip.