I'm attempting to show a remove icon on a grid display when the user hovers over it with their mouse.
this.state = {
action: [],
}
<div>
{this.state.action.map((value, index) => {
return (
<div key={index} onMouseEnter={this.removeElementIcon} onMouseLeave={this.hideRemoveElementIcon} className={classes.gridClass}>
<Grid className={classes.marginGrid}>
<Paper className={classes.paddingPaper}>
<Typography variant={"h5"}>{value}</Typography>
<Typography component={"p"}>{value}</Typography>
</Paper>
</Grid>
{this.state.removeElementIcon ?
<IconButton className={classes.removeElement} color={"secondary"} arial-label={"remove element"} onClick={()=> this.removeElement(value)}>
<ClearIcon color={"error"} />
</IconButton>
: null}
</div>
I have experimented with returning some jsx directly from the method itself.
removeElementIcon = () => {
return ({
this.state.removeElementIcon ?
<IconButton className={classes.removeElement} color={"secondary"}
arial-label={"remove element"} onClick={() => this.removeElement(value)}>
<ClearIcon color={"error"}/>
</IconButton> :
null
});
Instead of:
removeElementIcon = () => {
this.setState({removeElementIcon: true});
};
hideRemoveElementIcon = () => {
this.setState({removeElementIcon: false});
};
Rather than only displaying the clear icon on a single element, it appears on all elements simultaneously.