How To Add Setstate In React
I am trying to make a dynamic pie chart,in which when slider moves, values of dynamic pie chart also changes, I have made components and rendered them also, but I am not able to in
Solution 1:
You need to get the props passed to Chart component
<!DOCTYPE html><html><head><scriptsrc="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script><scriptsrc="https://unpkg.com/react@15.0.1/dist/react-with-addons.js"></script><scriptsrc="https://unpkg.com/react-dom@15.0.1/dist/react-dom.js"></script><scriptsrc="https://npmcdn.com/rd3@0.6.3/build/public/js/react-d3.js"></script><linkhref="http://getbootstrap.com/dist/css/bootstrap.css"rel="stylesheet"></head><body><divclass="container"><h1class="page-header">Dynamic Pie Chart</h1><divid="slider"class="col-lg-6"></div><divid="container"class="col-lg-6"></div></div></div></body><scripttype="text/babel">classChartextendsReact.Component{
render() {
varPieChart = rd3.PieChart;
var pieData
if(!this.props.pieData)
pieData = [{label: "First", value: 50}, {label: "Second", value: 50 }];
else
pieData = this.props.pieDatareturn (
<PieChartdata={pieData}width={450}height={400}radius={110}sectorBorderColor="white"/>
)}
}
Chart.propTypes={
pieData: React.PropTypes.arrayOf(React.PropTypes.shape({
label: React.PropTypes.string.isRequired,
value: React.PropTypes.number.isRequired })).isRequired
}
classSliderextendsReact.Component{
render(){
return (<div><inputtype='range'min='0'max='100'onChange = {this.props.sliderEvent} /></div>);
}
}
classAppextendsReact.Component{
constructor(props){
super(props);
this.state = {
pieData : [
{label: "First", value: 50}, {label: "Second", value: 50 }
]
};
}
handleSliderEvent(e){
var slices1 = (360 * e.target.value)/100;
var slices2 = 360 - slices1;
var array1 = [
{ label: "First", value: slices1 },
{ label: "Second", value: slices2 }
];
this.setState(function(prevState) {
return {pieData: array1}
});
}
render(){
return(<divclassName="row"><SlidersliderEvent = {this.handleSliderEvent.bind(this)}/><divclassName='col-lg-6'><ChartpieData={this.state.pieData} /></div></div>);
}
}
ReactDOM.render(<App/>, document.getElementById('container'));
</script></html>Solution 2:
I have solved the issue on my own, and here the way I have done it:
<!DOCTYPE html><html><head><title>Dynamic Pie Chart</title><scriptsrc="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script><scriptsrc="https://unpkg.com/react@15.0.1/dist/react-with-addons.js"></script><scriptsrc="https://unpkg.com/react-dom@15.0.1/dist/react-dom.js"></script><scriptsrc="https://npmcdn.com/rd3@0.6.3/build/public/js/react-d3.js"></script><linkhref="http://getbootstrap.com/dist/css/bootstrap.css"rel="stylesheet"></head><body><divclass="container"><h1class="page-header">Dynamic Pie Chart</h1><divid="container"class="col-lg-12"></div></div></body><scripttype="text/babel">classChartextendsReact.Component{
render() {
varPieChart = rd3.PieChart;
var pieData = [{label: "First", value: 50}, {label: "Second", value: 50 }];
return (
<PieChartdata={this.props.pieData}width={450}height={400}radius={110}sectorBorderColor="white"
/>
)}
}
Chart.propTypes={
pieData: React.PropTypes.arrayOf(React.PropTypes.shape({
label: React.PropTypes.string.isRequired,
value: React.PropTypes.number.isRequired })).isRequired
}
classSliderextendsReact.Component{
render(){
return (<divclassName='col-lg-6'><inputtype='range'min='0'max='100'onChange = {this.props.sliderEvent} /></div>);
}
}
classAppextendsReact.Component{
constructor(props){
super(props);
this.state = {
pieData : [{label: "First", value: 50}, {label: "Second", value: 50 }]
};
}
handleSliderEvent(e){
var slices1 = (100 * e.target.value)/100;
var slices2 = 100 - slices1;
var array1 = [
{ label: "First", value: slices1 },
{ label: "Second", value: slices2 }
];
this.setState({pieData: array1});
console.log('slice 1:'+slices1);
console.log('slice 2:'+slices2)
}
render(){
return(<div><SlidersliderEvent = {this.handleSliderEvent.bind(this)}/><divclassName='col-lg-6'><ChartpieData = {this.state.pieData} /></div></div>);
}
}
ReactDOM.render(<App/>, document.getElementById('container'));
</script></html>
Post a Comment for "How To Add Setstate In React"