I have a React component that displays two buttons. When the user clicks on the left button, it should change the class of both buttons and render the ListView component. Similarly, when the user clicks on the right button, it should change the class of both buttons and render the MapView component. I have attempted some solutions in the code below. Please provide feedback on what I might be missing and suggestions on how to achieve the desired behavior.
Thank you in advance!
import React, { Component } from 'react';
import { Typography, withStyles, Button} from '@material-ui/core';
import ListView from './listView/ListView';
import MapView from './mapView/mapView';
const styles = {
boardHeader: {
display: 'flex'
},
boardTitle: {
flexGrow: 1,
fontSize: 18,
fontWeight: 500,
color: '#ED8E34'
},
buttonList: {
backgroundColor: '#fff',
borderRadius: 50,
fontSize: 12,
minHeight: 10,
padding: '0px 30px',
boxShadow: 'none'
},
buttonMap: {
backgroundColor: '#fff',
borderRadius: 50,
fontSize: 12,
minHeight: 10,
padding: '0px 30px',
boxShadow: 'none',
marginLeft: '-10px'
},
activeButtonList: {
backgroundColor: '#fff',
borderRadius: 50,
fontSize: 12,
minHeight: 10,
padding: '0px 30px',
zIndex: 1
},
activeButtonMap: {
backgroundColor: '#fff',
borderRadius: 50,
fontSize: 12,
minHeight: 10,
padding: '0px 30px',
marginLeft: '-10px'
},
};
class BoardContent extends Component {
constructor(props){
super(props);
this.state = {
active: 1,
}
}
onClickList = (e, active) => {
this.setState({active})
}
render() {
const { classes } = this.props
const { active } = this.state
return (
<div>
<div className={classes.boardHeader}>
<Typography className={classes.boardTitle}>Select the View</Typography>
<div>
<Button variant="contained" size="small" className={active === 1 ? classes.activeButtonList : classes.buttonList} onClick={this.onClickList}>LIST VIEW</Button>
<Button variant="contained" size="small" className={active === 2 ? classes.activeButtonMap : classes.buttonMap} onClick={this.onClickList}>MAP VIEW</Button>
</div>
</div>
{active === 1 ? <ListView /> : null}
{active === 2 ? <MapView /> : null}
</div>
)
}
}
export default withStyles(styles)(BoardContent);