How To Disable Grid and its children in React js MUI

Question

I Want to Disable Grid (MUI Component) (and its Children) in React js .

and also , I Want to know how to Disable any Container and it's items in React js! (No matter what kind of children it has)

ex:

 <Grid
       item
       disabled  //And any other options
       xs={12}
       md={6}
       spacing={1}
       style={{ padding: '5px' }}>
       <CmpDateTimePicker
         label="from"
         value={this.props.from_timestamp}
         onChange={(from_timestamp) => 
             this.props.OnFromPeriodChanged(from_timestamp)}
         dir={dir}
         intl={intl}
         preSelect={lastMonthDate}
         />
  </Grid>

Thanks for your Help! :)

Answer 1

The disabled prop is not available on every MUI component, but instead you can conditionally render a component by using a simple if statement or ternary operator.

Since you give no context for the above code, I can't directly give you an example, but I can give examples for the two cases I spoke about above.

You can use an if statement like:

if(<conditional>){
 return <Grid>...</Grid>
}

return <div></div>

With this code your component will only render what is in the if statement when your conditional is true.

Another way is to use a ternary:

return (
 <div>
   {<conditional>?<Grid>
   ...
   </Grid>:""}
 </div>
)

You can use this inside of jsx to only conditionally render a certain component.