How to catch when component is Hidden? - reactjs

Question

I want to know when Hidden works. I have a two component, categories and news.
When screen resolution is a xsUp i want to show boths. When categories is visible news component paddingLeft = categiries.Width, But xsDown i want to hide categories grid and news component paddingLeft make to 0.
This is how it works.
render() {
const { classes } = this.props;
let news = this.props.news.map((item, index) =>{
return (
<Zoom in={true} timeout={500}>
<Grid item lg={3} xs={12} sm={12} md={6} lg={4} key={item.uid} spacing={16}>
<Paper elevation={0} className={classes.paper}>
<RecipeReviewCard info={item} />
</Paper>
</Grid>
</Zoom>
)
});
return (
<div className={classes.root}>
<Grid container className={classes.root}>
<Grid item xs={12}>
<Grid
container
spacing={16}
className={classes.demo}
alignItems={this.state.alignItems}
direction={this.state.direction}
justify={this.state.justify}
>
<Hidden xsDown>
<Grid
item
lg={2}
md={4}
style={{
width: 270,
maxWidth: 280,
minWidth: 270,
position: 'absolute',
height: '100%',
zIndex: 1
}}>
<Categories />
</Grid>
</Hidden>
<Grid container item lg={12} md={12} spacing={16} style={{paddingLeft: 300, zIndex: 0}}
>
{news}
</Grid>
</Grid>
</Grid>
</Grid>
</div>
);
}

Answer 1

I found solution simple solution myself. I send my function for Categories component, And when Component didMounted or willUnmounted I send Boolean what happend.
Something like this:
Categories.js
componentDidMount = () => {
console.log('CREATED');
this.props.showFull(false);
};
componentWillUnmount = () => {
this.props.showFull(true);
}
Main.js
constructor(props) {
super(props);
this.state = {
direction: 'row',
justify: 'flex-start',
alignItems: 'stretch',
hidden: true
}
}
updateState = (ok) => {
this.setState({
hidden: ok,
});
console.log('updated ' + ' ' + ok);
}
return (
<div className={classes.root}>
<Grid container className={classes.root}>
<Grid
container
spacing={16}
className={classes.demo}
alignItems={this.state.alignItems}
direction={this.state.direction}
justify={this.state.justify}
>
<Hidden xsDown>
<Grid
item
lg={2}
md={4}
style={{
width: '100%',
maxWidth: 280,
minWidth: 0,
position: 'fixed',
height: '100%',
zIndex: 1,
}}>
<Categories showFull={this.updateState} />
</Grid>
</Hidden>
<Grid container item lg={12} md={12} spacing={16}
style={{paddingLeft: this.state.hidden ? 0 : 300, zIndex: 3}}
>
{news}
</Grid>
</Grid>
</Grid>
</div>
);