score:1
just write a method upside the render() in billschart
componentdidupdate(prevprops) {
if (prevprops.spendings !== this.props.spendings) {
let {chartdata} = this.state;
chartdata.datasets[0].data = this.props.spendings
this.setstate({chartdata});
}
}
score:0
you are setting the prop spending
on your billchart in the render, which is passing an empty array as a prop to the component.
this.state = {
groceries: 10,
shopping: 0,
health: 0,
houseneeds: 0,
total: 0,
chartdata: []
};
<billchart spendings={[this.state.chartdata]} />
so when you setstate on chartdata in your billschart component it is setting the data property to that empty array.
this.state = {
chartdata: {
labels: ["groceries", "shopping", "health", "house needs"],
datasets: [
{
label: "amount spent",
backgroundcolor: "green",
hoverbackgroundcolor: "green",
hoverborderwidth: 2,
hoverbordercolor: "#000",
data: [this.props.spendings]
}
]
}
};
you need to setstate of chartdata to something besides an empty array before you pass it as a prop.
score:2
firstly, in your spendsapp
component you have never changed the value of the chartdata state. you change the number of the total and the other properties but you never change the value of the chartdata you pass.
you can have something like that
//code....
constructor(props) {
super(props);
this.state = {
groceries: 10,
shopping: 0,
health: 0,
houseneeds: 0,
total: 0,
chartdata: []
}
}
handlesubmit(e) {
e.preventdefault();
const { groceries, shopping, health, houseneeds } = this.state;
const gsum = parseint(groceries, 10);
const ssum = parseint(shopping, 10);
const hsum = parseint(health, 10);
const hnsum = parseint(houseneeds, 10);
// chartdata array elements should be ordered as in your labels in the <billschart/>
// labels: ["groceries", "shopping", "health", "house needs"] as you have it
this.setstate({
total: gsum + ssum + hsum + hnsum,
chartdata: [gsum, ssum, hsum, hnsum]
});
}
also another thing is that instead of this:
<billchart spendings={[this.state.chartdata]} />
try this
<billchart spendings={this.state.chartdata} />
the reason for that is because, if you passed correctly the values in the array you will end up in with a two-dismentional array here data: [this.props.spendings]
.
if you have already mounted your component you should use componentdidupdate()
to change the state of the <billchart/>
:
componentdidupdate(prevprops) {
if (prevprops.spendings !== this.props.spendings) {
let chartdata = this.state.chartdata;
chartdata.datasets[0].data = this.props.spendings
this.setstate({chartdata});
}
}
Source: stackoverflow.com
Related Query
- How to pass data to a Chart.js chart in React
- How can I pass data using <Redirect> in react router v4?
- How can I pass data from express server to react views?
- How to pass percentage value to width to React data grid column
- How do you pass data when using the navigate function in react router v6
- How to pass data from React Form -> Flask Backend -> React Component (does it have something to do with CORS)?
- How to activate a react route and pass data from the service worker?
- How to pass data from one component to another in React or React-Redux?
- How to pass server data into React component
- React - How to pass returned data from an exported function to a component?
- How to pass data from a page to another page using react router
- React JS How to pass data between pages in Hook ( useEffect)
- How to pass down data through 3 class components in react correctly?
- Gatsby: how to pass data to React Context at build time
- How to pass data from vanilla JavaScript to React functional component
- React Data Table Expandable Rows : how to pass additional Props
- How to properly update chart in React & Chart.js app using API data
- How Do I Pass a Function Through A React Component For Data Sharing Between Parent and Child?
- How to pass data by button click in redux react js
- How to pass data from blade.php file to a react component using HTML element attributes?
- React Redux how to pass data from input to rest api
- How to pass data from React client into the Oauth2.0 Google strategy flow with passport.js
- How to call a react hook fetch request in a functional component to access data then pass to a class component to map?
- How to pass fetched data as props to a component with react hooks?
- How can I pass Apollo data and React Router 4 url params to my components
- How to pass data to a popup modal in React
- In React How to pass object using history.push from a component to child component and read data
- How can i pass data from promise to props in react
- pass data to a page within a redirect in React but have error in when read data , How slove?
- How to pass data from GraphQL when in a React Component
More Query from same tag
- How to pass react component into dangerouslySetInnerHtml?
- Bootstrap rows/columns not working in React app
- Cannot read Property of undeifned Cards material ui
- Starting with React
- Performance implications of implementing 2-way data binding in React
- Is there a way to configure a base url on react-query's QueryClient?
- What changes to a component state can I make using React devtools?
- not able to render my react component in redux way
- useRef React Hook
- Nothing shows up after setState filling by components
- FirebaseAuthError when using Nookies to get token. (NextJS)
- Typescript error when trying to map over Enum keys to produce JSX elements
- The resetForm method of Formik does not work as expected
- How to display an array based on Option Select? (reactjs)
- How to return child as a function in React after modifying the children with React.Children API?
- Is there a Dropdown component which allows for a custom styled options on desktop, but native behavior on mobile?
- An unexpected error occurred: "https://registry.yarnpkg.com/react: unable to get local issuer certificate" while create-react-app
- RegEx that match react router path declaration
- Animate svg rect on button click
- What is the right approach for state change?
- Convert this Responsive Blog Card Slider made using HTML, CSS and Swiper js into React js with Swiper js
- How does a parent component communicate with a child component that was passed in as a prop?
- Webpack-dev-server Cannot find module 'webpack-cli/bin/config-yargs'
- How to access data from location in react-router-dom 6
- React setState rendering behavior
- Can't find variable lat&lon, recognized everywhere except in render react
- I can't find where the issue is in my code,my delete function is deleting everything in the state but is not deleting a customer in the database
- Getting related news by tags in Gatsby and GraphQL
- React edit entire row of inputs, then update state in another component
- Why is my Swiper render buggy at the first time render using React