score:2
Accepted answer
in react, you can pass the data two way most commonly:
1.
- pass a callback function to from common main to child component.
- when async action is done, execute it with data.
- give it the data with props to another component.
export default function bucket({ ongetdata }) {
const { slug } = useparams();
const classes = usestyles();
const [data, setdata] = usestate({ bucket: [] });
useeffect(() => {
axiosinstance.get('bucket/' + slug + '/').then((res) => {
setdata({ bucket: res.data });
console.log(res.data);
});
}, [setdata, slug]);
const getdata = () => {
axiosinstance
.get('bucket/fin-data/' + slug).then((response) => {
ongetdata(response);
console.log(response)
})
}
return (
<container component="main" maxwidth="md">
<cssbaseline />
<div classname={classes.paper}></div>
<div classname={classes.herocontent}>
{...}
<button onclick={getdata}>get data</button>
</div>
</container>
);
}
export default function maincomponent() {
const [data, setdata] = usestate({});
const ongetdata = (result) => {
setdata(result);
};
return (
<maincomponent>
<bucket ongetdata={ongetdata} />
<barchart data={data} />
</maincomponent>
);
}
- you can pass with any state manager: redux, mobx e.g.
Source: stackoverflow.com
Related Query
- React - How can I pass API data from one component to another in a different js file?
- how to pass function variable from one file to another in react
- How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API
- How to differentiate the data of one topic or another coming from Mercure hub if the client is suscribed to two topics
- how can we use function of one component into another js file
- How can I sort data from highest to lowest in chart.js
- How can I load multiple Chartjs charts with different data on the same page?
- Angular 2: How to pass my API data to graph and Display the Graph with data
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- How can I prevent the hover data from displaying in Chart.JS?
- How to handle data API from Django Rest Framework in Chart.js
- Prevent label of another data from being toggled whenever a label from one data is toggled
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to fetch all data from API files and assign their values to chart?
- How to get Data from API to display chart using chartjs in Vuejs
- How can I pass my sqlite data to django, and make chart?
- Save data from REST API Get method and use it one more time
- How to split data from api to get a chart
- How can make my chart.js dynamic using data from database
- How to call back one js file from another js file?
- In react hooks, how can i pass the filtered values to the chart?
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
- How can have variable data be from a url in javascript
- How to stop displaying the data values from different data objects on Chart JS 2.x?
- Svelte , pass data to chartjs from API
- How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+
- How can I pass the data into the chartjs label?
- How can i display multiple years of data from 1 project in Chart.js?
- Send data from a form to another component of the same level -angular
- React and Chartjs not updating from dynamic data through api
More Query from same tag
- How to align labels at same side chartjs React
- Add new chart.js when clicking a button, but get 'Cannot read property 'getContext' of null'
- Can i use destroy charts in React.js using Chart.js?
- Count all distinct values from JSON in javascript for ChartJS
- [MIXED CHART.JS]animation option screws up chart.js
- ChartJs: Different Fill Colour Between Data Points
- Make time series show last date in axis?
- Create data in data with Chartjs
- Ng2-Charts Linechart only showing first 2 two values
- ChartsJS Annotations Plugin - Can you create a tooltip to accompany an annotation?
- flask altering python list
- How to parse data to graph in MVC
- Iterating over an IEnumerable in Javascript for Chartjs
- How to export chart.js graph to svg in vue?
- ChartJS, add new dataset
- Change position of Chart.js tick labels
- Chart.js, adding footer to chart
- How to set minimum value to Radar Chart in chart js
- How to parse "hh:mm:ss" strings to time in Charts.js 3.x
- ChartJS 2.7.3 stacked bar chart with overlap
- Is there any way to use 2 different color for the same bar in a chart?
- How do I invert an y-axis using chart.js (v2.0-dev)
- I'm trying to get data from flask app but I get this "Uncaught ReferenceError: _data is not defined"
- ChartJs - Footer color dynamically
- How to assign specific colors to data items in a doughnut chart in Angular Chart?
- Chart.js legend customisation
- Can I arrange labels of legend in Doughnut chart one by one?
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- How to append text or symbol to tooltip of chart.js
- Is there any method to map or represent API data to Chart in ReactJS?