Question 72766 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How would I be able to access a method in a component from another component – Reactjs

I have two component say Navbar and Sidebar which is rendered in App.jsx. I need a method defined inside Sidebar to be accessed in Navbar. This is the code

I have this inside Navbar.jsx

export default function Navbar(props) {
  const show = props.myMethod;

  return (
    <div>
      <p>This is a gibberish</p>
      <p> onClick={show} </p>
    </div>
  );
}

I have this inside Sidebar.jsx

export default function Sidebar() {
  const myMethod = () => {
    alert("Hi!!! I am Collins");
  };

  return (
    <div>
      <p>I am feeling good</p>
    </div>
  );
}

Now in my App.jsx I have

import Sidebar from "./Sidebar";
import Navbar from "./Nabar";

function App() {
  return (
    <>
      <Sidebar />

      <Navbar myMethod={myMethod} />
    </>
  );
}

I tried to pass props to the Navbar where I need the method but it comes out with an error that myMethod is not defined.

I know this is going to be a simple thing but I just started learning react by self teaching.

Thanks in advance!!!

I tried to pass props to the Navbar where I need the method but it comes out with an error that myMethod is not defined. I ensured the necessary things were imported in App.jsx but still the same error

Tags:

3

Answers


  1. 0

    The most simple solution would be to hold the method declaration in App.js and then, pass it to it’s child components (sibling) components.

    Here is the code –

    App.js

    import Sidebar from './Sidebar'
import Navbar from './Navbar'

function App(){

   const myMethod = ()=>{
       alert("Hi!!! I am Collins");
   }

   return (
       <>
           <Sidebar myMethod={myMethod}/>
           <Navbar myMethod={myMethod} />
       </>
    )
}

    Sidebar.js

    export default function Sidebar({ myMethod }){
    return(
        <div>
        <p>I am feeling good</p>
    </div>
   )
}

    Navbar.js

    export default function Navbar(props){
    const show = props.myMethod;
    return(
        <div>
            <p>This is a gibberish</p>
            <p onClick={show} </p>
        </div>
    )
}
    Login or Signup to reply.
  2. 0 
    <myComponent propName={propValue}/>

    The code above is calling <myComponent/> component and passing propValue as propName to it.
    so propValue should exist in the component calling <myComponent/> so that it can be passed as props.

    In your code you are trying to pass myMethod as myMethod to <Navbar/> from App but there is no myMethod defined there.

    You can have a look at React useContext hook

    React Context is a way to manage state globally.
    It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

    or just declare myMethod in the App component then pass it to SideBar and Navbar

    function App() {
  const myMethod = () => {
    alert("Hi!!! I am Collins");;
  };
  return (
    <>
      <Sidebar myMethod={myMethod} />
      <Navbar myMethod={myMethod} />
    </>
  );
}

    Now you can access it from Navbar as you are already doing:

    const Navbar = (props) => {
 //...
<p onClick={props.myMethod}</p>
}

    You can remove myMethod from Sidebar since Sidebar is now receiving the same function as props.myMethod.

    Login or Signup to reply.
  3. 0 
    You should call Navbar component from Sidebar component.

this is NavBar.jsx

export default function Navbar(props){

    const show = props.myMethod;
    
return(
    <>
    <div>
    <p>This is a gibberish</p>
    <button onClick={show} >sideBar Button</button>
    </div>
    </>
    )
    }

this is Sidebar.jsx

import Navbar from "./Navbar";
export default function Sidebar(){

    const myMethod = ()=>{
    
    alert("Hi!!! I am Collins");
    
    }
    
    return(
    
    <div>
    
    <p>I am feeling good</p>
    <Navbar myMethod={myMethod} />
    </div>
    )
    
    }

this is app.jsx

import React from 'react';
import Sidebar from './components/Sidebar'


return (
  <>
  <Sidebar />
  
  </>
  )
}


export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search