Invoke a function inside a React stateless component - reactjs

Question

I'm trying to invoke the function ButtonAppBar inside my stateless component but the TS compiler gives me this error: '{' expected. I'm not sure whether I should be passing it to my New Header component or whether I should give it a type.
Here's my component
import * as React from "react";
import { withStyles, createStyles } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
import Button from "#material-ui/core/Button";
import IconButton from "#material-ui/core/IconButton";
import MenuIcon from "#material-ui/icons/Menu";
const styles: any = createStyles({
root: {
flexGrow: 1
},
header: {
backgroundColor: "#007"
},
grow: {
flexGrow: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
}
});
const ButtonAppBar = (styles) => {
const classes = styles;
return (
<div className={classes.root}>
<AppBar position="static" className={classes.header}>
<Toolbar>
<IconButton
className={classes.menuButton}
color="inherit"
aria-label="Menu"
>
<MenuIcon />
</IconButton>
<Button color="inherit">Home</Button>
<Button color="inherit">Help</Button>
</Toolbar>
</AppBar>
</div>
);
}
const NewHeader: React.StatelessComponent<props> = ({}) => {
return (
{ButtonAppBar()}
);
}
export default withStyles(styles, NewHeader);

Answer 1

Your code is not parsed properly.
const NewHeader: React.StatelessComponent<props> = ({}) => ButtonAppBar();
either:
const NewHeader: React.StatelessComponent<props> = ({}) => {
return ButtonAppBar();
}