Passing a function to React component in props

Question

I checked other questions and also docs but I cannot make it work. I want to pass a handler function to a child component within its props to change between themes.

I defined a state in the parent component and the handler that sets the new state. I tried with and without a parameter.

This is the parent

class MyApp extends App {

  constructor(props) {
    super(props);
    this.state = {
      colorScheme: "light"
    };
    this.handleColorScheme = this.handleColorScheme.bind(this);
  }

  handleColorScheme = scheme => {
    this.setState({ colorScheme: scheme });
  };

  render() {
    const { Component, pageProps } = this.props;

    const props = {
      ...pageProps,
      schemeHandler: this.handleColorScheme
    };
    return (
      <Container>
         <ThemeProvider
            theme={this.state.colorScheme === "light" ? theme : themeDark}
          >
            <Component {...props} />
          </ThemeProvider>
      </Container>
    );
  }
}

export default MyApp;

And this the child component

export default function Layout(props) {
  const [theme, setTheme] = useState({
    palette: {
      type: "light"
    }
  });

  const toggleDarkTheme = () => {
    let newPaletteType = theme.palette.type === "light" ? "dark" : "light";    
    props.schemeHandler(newPaletteType);
  };

  return (
   <div>
      <CssBaseline />
      <div className={classes.root}>
        <AppBar
          position="absolute"
          color={"default"}
          className={classes.appBar}
        >
          <Toolbar>
              <IconButton onClick={toggleDarkTheme}>
                <Dark />
              </IconButton>            
          </Toolbar>
        </AppBar>
        <main className={classes.content}>          
          {props.children}
        </main>
      </div>
    </div>
  );
}

When I click the button it says that toggleDarkTheme is not a function. Debugging with dev tools I see that I never reach parent function. How can this function be passed in props?

Can you verify that toggleDarkTheme actually triggers anything? Just comment out the current logic in that function and do an alert or console.log() — Cat_Enthusiast
– Cat_Enthusiast, Commented Aug 15, 2019 at 9:14
@ChristopherNgo yes, it triggers toggleDarkTheme function in the child component — Pere
– Pere, Commented Aug 15, 2019 at 9:19

Darryl RN · Accepted Answer · 2019-08-15 12:19:00Z

2

You should not use state in both parent and children, it makes your logic become complicated. You can place the state in parent and pass the modifier function as prop to children (children become dumb component).
No need to bind the modifier function.
Parent component can become a function instead of a class.

Example: https://codesandbox.io/embed/passing-react-func-as-props-kf8lr

answered Aug 15, 2019 at 12:19

Darryl RN

8,4405 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pere Over a year ago

Finally get it working, there was a another component between app.js and Layout that was not passing down props. Found it debugging the props. Anyway I followed your advice, now logic is simplified, only parent holds the state

Isaac Khoo · Accepted Answer · 2019-08-15 09:59:36Z

0

I suspect it is because of syntax.

<IconButton onClick={() => toggleDarkTheme() }>

Changing this line in your child component should do the trick. Cant really know without having some minimal code to test run

answered Aug 15, 2019 at 9:59

Isaac Khoo

5553 silver badges10 bronze badges

Collectives™ on Stack Overflow

Passing a function to React component in props

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related