Conditional rendering of bar graph

up vote
0
down vote
favorite
I have a bar graph that I would like to render with different sets of data when the user flips a DropDown menu. Can I use a switch statement inside the render() function of react.js? What is the syntax for dynamically changing the data set based on the dropdown menu selection?

Currently, I have the static dropdown, and bar graph displaying the data for "Months", and would like to change the graph when flipped to "Days, "Weeks", etc.

constructor(props, context) {
super(props, context);
this.state = {
isError: false,
errorMsg: '',
};
this.setState = this.setState.bind(this);
this.handleErrorClose = this.handleErrorClose.bind(this);
this.state = {
completed: 0,
value: 3
};
};

handleChange(name, e) {
var change = {};
change[name] = e.target.value;
this.setState(change);
}

handleErrorClose() {
this.setState({ isError: false });
}

render() {
return (
<div style={styles.container}>
<div className="col-lg-8 col-md-8 col-sm-16 col-xs-16">
<Paper zDepth={1} style={styles.paperStyle1} className="clearfix">
...

<table>
<tr><td style={over}>Over </td><td style={time}>
<DropDownMenu value={this.state.value} onChange={this.handleChange}>
<MenuItem value={1} primaryText="Days" />
<MenuItem value={2} primaryText="Weeks" />
<MenuItem value={3} primaryText="Months" />
<MenuItem value={4} primaryText="Years" />
</DropDownMenu>
</td></tr>
</table>
</div>
<div style={barArea}>

<BarChart width={580} height={300} data={data}>
<XAxis dataKey="name" stroke="#8884d8" />
<YAxis />
<Tooltip wrapperStyle={{ width: 100, backgroundColor: '#ccc' }} />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<Bar type="monotone" dataKey="points" fill="#5b9bd5" barSize={10} />
</BarChart>

</div>
</Paper>