Thanks for your help! I have two questions:
1.)
I have a function "Grid":
function Grid(props) {
const {icon, title} = props;
const classes = styles();
return (
<div className={classes.wrapper}>
<div className={classes.item}>{icon}</div>
<Typography textDecorator="bold" className={classes.item} variant="h5">{title}</Typography>
<div className={classes.item}>
<CustomBtn/>
</div>
</div>
)
}
How do I call the function but not call CustomBtn? This relates to my next question.
2.)
function App() {
const classes = styles();
return (
<div className="App">
<ThemeProvider theme={theme}>
<NavBar/>
<div className={classes.wrapper}>
<Typography variant="h4" className={classes.bigSpace} color="primary">
Welcome, to the future of healthcare.
</Typography>
</div>
<div className={`${classes.grid} ${classes.bigSpace}`}>
<Grid icon={<SecurityIcon style={{fill: "#4360A6", height:"125", width:"125"}}/>} title="Secure" />
<Grid icon={<EventNoteIcon style={{fill: "#449A76", height:"125", width:"125"}}/>} title="Patient-driven" btnTitle="Patients control their data"/>
<Grid icon={<TrendingUpIcon style={{fill: "#D05B2D", height:"125", width:"125"}}/>} title="Autonomous" btnTitle="No corporate malice included"/>
</div>
<div className={`${classes.grid} ${classes.bigSpace}`}>
<Grid btnTitle="Providers" title="Offload patient data handling to us"/>
<Grid btnTitle="Patients" title="Take control of your medical data"/>
<Grid btnTitle="Companies" title="See real-time patient outcomes"/>
</div>
<div className={classes.bigSpace}>
<Footer/>
</div>
</ThemeProvider>
</div>
);
}
is there a way for me to call "CustomBtn" inside one of those grid elements? Like:
<Grid btnTitle="Companies" title="See real-time patient outcomes" {<CustomBtn text="hello" color="red"}/>
I tried the above and it didn't work, is there a certain way to accomplish this?
{props.showCustomBtn && <CustomBtn... />}
<Grid btnTitle="Companies" title="See real-time patient outcomes"><CustomBtn text="hello" color="red"}/></Grid>
And then render children inside the Grid component:
function Grid(props) {
return (
<div>
{props.children}
</div>
);
}
Obviously the above is just to show the general idea. You would place {props.children} inside the Grid wherever you want the CustomBtn to be rendered.
I figured it out and the two answers go hand in hand.
For #1.) You want to make sure that you pass all of the "custom features" of the prop to the function as props like:
function Grid(props) {
const {icon, title, button} = props;
const classes = styles();
return (
<div className={classes.wrapper}>
<div className={classes.item}>{icon}</div>
<Typography textDecorator="bold" className={classes.item} variant="h5">{title}</Typography>
<div className={classes.item}>
{button}
</div>
</div>
)
}
On the second line, I didn't pass in a button before so I was having that issue.
Then for answer #2.):
<Grid button={<CustomBtn text="Companies" />} title="See real-time patient outcomes"/>