CODEWITHSUNDEEP
reactjs
Swerfer
Swerfer

Reputation: 355

Call class method from another component

I'm stuck with React what's a new programming environment for me. So probably I use wrong names for certain objects.

I want to call a method in a class in file 'App.jsx' from a component in file 'Navbar.jsx'. This is (part of) my code so far:

App.jsx:

import React, {} from "react";
import { Navbar, Home, Footer, Documentation } from "./components";

class App extends React.Component  {

  constructor(props)
  {
    super(props);
    this.state = { mainComponent: 'Home' };
  }

  getClick = () => {
    console.log('test');
  }

  render() {
    return (
      <div className="min-h-screen gradient-bg-welcome">
        <Navbar getClick={this.getClick}/>
        <Home/>
        <Footer/>
      </div>
    ); 
  }
}

export default App;

Navbar.jxs:

...
const Navbar = () => {
  ...
  return (
    ...
    <div ... onclick={() => (call getClick in App.jsx here)}>
      ...
    </div>
  );
}

export default Navbar;

I searched the internet and tried some code from several examples, but I probably miss something simple. I can't figure out how to call getClick from Navbar.jsx.

I also tried using states, which should be a better option from what I read, but that also didn't work out for me.

My goal:

In App.jsx I have this:

 <Navbar/>
 <Home/>
 <Footer/>

I want, from the Navbar where I have some link texts, to reload/change the component between Navbar and Footer for another component based on what link I click in the Navbar.

Upvotes: 0

Views: 27

Answers (1)

TheWhiteFang
TheWhiteFang

Reputation: 783

Try this

const Navbar = (props) => {
  ...
  return (
    ...
    <div ... onclick={() => props.getClick()}>
      ...
    </div>
  );
}

export default Navbar;

What we did here is simple, we simply passed the function as a prop from the parent. And used the passed props to access and call the function.

Upvotes: 2

Related Questions