Brand new to react and confused on how I omit an item from a function and also inject a button into my grid

user_13692702 0
Viewed 20

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?

reactjs javascript
2 Answers
  1. Pass a prop something like 'showCustomBtn' and then use a conditional expression:
    {props.showCustomBtn && <CustomBtn... />}
  1. Use this:
<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.

user_12847600

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"/>
user_136927020
Related