Material UI component written is function based component? - material-ui

Question

I am trying to use material ui component into react class based component material ui component demo everthing wrtten function based but we are written all project pages are class based very difficult to integrating material UI component

Answer 1

It is not difficult to integrate on class-based Components. yes, In Material UI doc all the things have integrated on functional-based Components with using Hooks. But you should have some Knowledge about hooks and state concepts then you can easily be integrated them.
for example:
export default function AlertDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location
data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
So, this Dialog Code has written in functional Based Components But we can easily integrated on class based component Like:
export default class AlertDialog extends React.Components{
constructor(){
super(props)
this.state={
open:false
}
}
handleClickOpen = () => {
this.setState({open:true})
};
handleClose = () => {
this.setState({open:false})
};
render(){
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location
data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Disagree
</Button>
<Button onClick={this.handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
So, just we should have Knowledge about basic React Concept and you can do this.