1

I want to include a save button in my navbar which should evoke my savebuttonhandler1 function. However, the savebuttonhandler1 function is a nested function within a functional component (rete.js).

Rete.js is a functional component serving one page of my website. It calls an API (dialogflow). Navbar is layered on top of every single page.

And this is the hierarchy of the components: App.js (parent) --> Navbar.js (child)

App.js (parent) --> Canvas.js (parent) --> Rete.js (child)

Do you know any way to access the nested function? Can I use react context to do it?

Here is my navbar.js (simplified):

const Navbar = (props) => {
  return (
    <div className={root}>
      <AppBar position="absolute" className={root}>
        <Toolbar>
          <img className={img} src={Logo} alt={Logo} />
          <Typography variant="h4" className={title} component={Link} to="/">
            MyTeachingBot
          </Typography>
                <Fragment>
                  <Button
                    className={createnewButton}
                    component={Link}
                    endIcon={<SaveIcon />}
                    onClick={savebuttonhandler1} --> this is the button where I want to envoke the nested function
                  >
                    Save and Test
                  </Button>
      
                
            ]
          )}
        </Toolbar>
      </AppBar>
    </div>
  );
};

And here is the nested savebuttonhandler1 function in rete.js:

const Rete = (props) => {
   const saveButtonHandler1 = async () => {
     ...some Code}
Rainer Winkler
  • 485
  • 1
  • 7
  • 20
  • How do you use Rete component? – Hayden S. Aug 25 '20 at 18:02
  • Rete.js is a functional component serving one page of my website. It calls an API (dialogflow). Navbar is layered on top of every single page. – Rainer Winkler Aug 25 '20 at 18:11
  • Hey..What is the hierarchy of these components –  Aug 25 '20 at 19:16
  • App.js (parent) --> Navbar (child). App.js (parent) --> Canvas(parent) --> Rete(child) – Rainer Winkler Aug 26 '20 at 04:56
  • You could either do it with context or lift your state all the way up to `app.js` then pass the method/state to it's children. If both Rete and Navbar uses the same Save button, turn that into a component itself and import them into those components. – Shawn Yap Aug 26 '20 at 05:53

0 Answers0