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! :)
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.