How to pass props to a material-ui styled component?

Question

I have a component I would like to pass props too, however this component also has internal props to handle the styling and I'm not sure how to handle both.

This is what I currently have.

const styles = theme => ({
    // Theme building
});

const LoginLink = React.forwardRef((props, ref) => (
    <Link innerRef={ref} to="/login" {...props} />
));

const HomeLink = React.forwardRef((props, ref) => (
    <Link innerRef={ref} to="/" {...props} />
));

const NavBar = (props) => {

    const {classes} = props;

    // Some functions

    return(

        // Some code

        {props.isAuthenticated
                ? <Button color="inherit" onClick={handleLogout}>Logout</Button>
                : <Button color="inherit" component={LoginLink}>Login</Button>
        }
    );
}

NavBar.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(NavBar);

And this is where I'm using it:

class App extends Component{

  constructor(props){
    super(props);

    this.state = {
      isAuthenticated: false,
      isAuthenticating: true
    };
  }

  // Functions

  render(){

    const childProps = {
      isAuthenticated: this.state.isAuthenticated,
      userHasAuthenticated: this.userHasAuthenticated
    };

    return (
      !this.state.isAuthenticating &&
      <MuiThemeProvider theme={theme}>
        <div className = "App">
          <NavBar props={childProps} />
          <Routes childProps={childProps} />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Right now this is taking props as 'undefined'. And honestly, I have no idea where to start adding this second props as I'm still rather new to even node.js and web development in general.

Answer 1

Instead of doing:

<NavBar props={childProps} />

You can either choose to spread the props:

/*
 * Assuming eg: const childProps = {isAuthenticated: true};
 */
<NavBar {...childProps} />

Or you can simply assign them directly like this:

/*
 * Assuming eg: const isAuthenticated = true;
 */
<NavBar isAuthenticated={isAuthenticated} />