I am passing data from parent to child ponent in react , from App.js to chart.js through props and the values are passsed and i can see them logged the the console in child ponent but i want to change the state of chart data property as the props values changed so that the graph also gets changed .
here is my code for child ponent/chart.js file
import { useState } from "react";
import { Line ,Bar} from "react-chartjs-2"
const Bargraph = ({totalIne,Balance,Expenses}) => {
**console.log("data is ",totalIne,Balance,Expenses)**
const [state,setState] = useState({
labels:["Total Ine","Expenses","Current Balance"],
datasets:[{
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data:[totalIne,Balance,Expenses]
}]
})
return (
<section className="chart mb-4 mt-lg-5">
<div className="container-lg">
<div className="text-center">
<h2> Ine , Expenses and Current Balance </h2>
<p className="lead"> Bar graph showing Total icnome , Expenses and remaining balance </p>
</div>
<div className="row justify-content-center align-items-center mt-3 g-4">
<div className="col-md-5">
<Line data={state}
options={{
title:{
display:true,
text:'Ine , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
<div className="col-md-5">
<Bar data={state}
options={{
title:{
display:true,
text:'Ine , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
</div>
</div>
</section>
);
}
export default Bargraph;
I am passing data from parent to child ponent in react , from App.js to chart.js through props and the values are passsed and i can see them logged the the console in child ponent but i want to change the state of chart data property as the props values changed so that the graph also gets changed .
here is my code for child ponent/chart.js file
import { useState } from "react";
import { Line ,Bar} from "react-chartjs-2"
const Bargraph = ({totalIne,Balance,Expenses}) => {
**console.log("data is ",totalIne,Balance,Expenses)**
const [state,setState] = useState({
labels:["Total Ine","Expenses","Current Balance"],
datasets:[{
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data:[totalIne,Balance,Expenses]
}]
})
return (
<section className="chart mb-4 mt-lg-5">
<div className="container-lg">
<div className="text-center">
<h2> Ine , Expenses and Current Balance </h2>
<p className="lead"> Bar graph showing Total icnome , Expenses and remaining balance </p>
</div>
<div className="row justify-content-center align-items-center mt-3 g-4">
<div className="col-md-5">
<Line data={state}
options={{
title:{
display:true,
text:'Ine , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
<div className="col-md-5">
<Bar data={state}
options={{
title:{
display:true,
text:'Ine , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
</div>
</div>
</section>
);
}
export default Bargraph;
3 Answers
Reset to default 5The other answers about useEffect show how you can achieve this when using state. Your example, however, does not require state at all. Think about props as very similar to state: Changes trigger a rerender automatically so if you can calculate something directly from them, do it in the render function/functional ponent.
import { Line ,Bar} from "react-chartjs-2"
const Bargraph = ({totalIne,Balance,Expenses}) => {
// simply calculate the chartData from the props
const chartData = {
labels:["Total Ine","Expenses","Current Balance"],
datasets:[{
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data:[totalIne,Balance,Expenses]
}]
}
return (
<section className="chart mb-4 mt-lg-5">
<div className="container-lg">
<div className="text-center">
<h2> Ine , Expenses and Current Balance </h2>
<p className="lead"> Bar graph showing Total icnome , Expenses and remaining balance </p>
</div>
<div className="row justify-content-center align-items-center mt-3 g-4">
<div className="col-md-5">
<Line data={chartData}
options={{
title:{
display:true,
text:'Ine , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
<div className="col-md-5">
<Bar data={chartData}
options={{
title:{
display:true,
text:'Ine , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
</div>
</div>
</section>
);
}
export default Bargraph;
use useEffect to get updated values.
import { useState } from "react";
import { Line ,Bar} from "react-chartjs-2"
var Bargraph = ({totalIne,Balance,Expenses}) => {
**console.log("data is ",totalIne,Balance,Expenses)**
const [state,setState] = useState({
labels:["Total Ine","Expenses","Current Balance"],
datasets:[{
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data:[totalIne,Balance,Expenses]
}]
})
useEffect(() => {
setState({
labels:["Total Ine","Expenses","Current Balance"],
datasets:[{
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data:[totalIne,Balance,Expenses]
}]
})
}, [totalIne,Balance,Expenses]);
return (
<section className="chart mb-4 mt-lg-5">
<div className="container-lg">
<div className="text-center">
<h2> Ine , Expenses and Current Balance </h2>
<p className="lead"> Bar graph showing Total icnome , Expenses and remaining balance </p>
</div>
<div className="row justify-content-center align-items-center mt-3 g-4">
<div className="col-md-5">
<Line data={state}
options={{
title:{
display:true,
text:'Ine , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
<div className="col-md-5">
<Bar data={state}
options={{
title:{
display:true,
text:'Ine , Expenses and Current Balance',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
</div>
</div>
</section>
);
}
export default Bargraph;
You can use useEffect to update your state when props change
useEffect(() => {
setState([
{
backgroundColor: "rgba(75,192,192,1)",
borderColor: "rgba(0,0,0,1)",
borderWidth: 2,
data: [totalIne, Balance, Expenses],
},
]);
}, [totalIne, Balance, Expenses]);