score:1
so since you are using useeffect
with empty dependency array, your component pie
will only run the pie chart creation code inside useeffect
on component mount.
now since you are fetching the data using axios asynchronously, the data will be passed to the pie
component after it is already mounted. so now data changes will not be reflected in pie chart.
adding the props.data
in the dependency array will run the useeffect
whenever new data is passed to the pie component. (i.e. on props update).
useeffect(() => {
// your code for rendering pie chart
return () => {
pie.dispose();
};
}, [props.data])
https://codesandbox.io/s/blissful-fast-djuxm?file=/src/pie.jsx
score:1
you need to add a conditional render to check if data is not an empty array:
return (
<section classname="statistics">
{data.length > 0 && <pie data={data} />}
</section>
);
or instead of a render condition you can add props.data to uselayouteffect dependencies:
uselayouteffect(() => {
let pie = am4core.create("chartdiv", am4charts.piechart3d);
let piedata = [];
props.data.map((item) => {
let obj = {};
obj = { name: item.prod_name, quantity: item.prod_quantity };
piedata.push(obj);
});
// ...
pie.data = piedata;
let pieseries = pie.series.push(new am4charts.pieseries3d());
pieseries.slices.template.strokeopacity = 1;
pie.radius = am4core.percent(70);
pieseries.datafields.value = "quantity";
pieseries.datafields.category = "name";
pieseries.hiddenstate.properties.opacity = 1;
pieseries.hiddenstate.properties.endangle = -90;
pieseries.hiddenstate.properties.startangle = -90;
pie.hiddenstate.properties.radius = am4core.percent(60);
pie.innerradius = am4core.percent(40);
chart.current = pie;
return () => {
pie.dispose();
};
}, [props.data]);
Source: stackoverflow.com
Related Query
- React amchart4 rendering only watermark logo?
- Single React Component rendering with Babel Standalone with only index.html and Component
- React Js component rendering only once after state change
- Does React only re-rendering what has changed benefit rendering speed?
- React onClick function only fires once upon rendering to DOM
- React Router only rendering one route
- react router only rendering first route
- React Router rendering only base path (/) and throwing error for other paths when requested directly in the browser
- React HashRouter not rendering other paths, only Rendering root component '/'
- React Router with Multiple Switches Rendering Only First Switch Components
- Why is my react component not rendering only when using routes? react-router-domV.6
- React with D3 - Only rendering new items without updating or removing old ones
- Conditional Rendering in React Page Refresh Only Happens with Ctrl + F5
- React component is rendering only once time
- Rendering a component only after API request is finished React hooks
- React conditional rendering only partially happening
- React onClick event only triggers when rendering component
- Why is only the first React component rendering in my multi-page in Django app?
- React seems to be rendering all elements but only displaying the first?
- React component only rendering one item in my object
- React router rendering only the '/' path
- How to call loading function with React useEffect only once
- react hooks useEffect() cleanup for only componentWillUnmount?
- ReactJS SyntheticEvent stopPropagation() only works with React events?
- Rendering React Components from Array of Objects
- React hooks useEffect only on update?
- Rendering an array.map() in React
- Rendering React components with promises inside the render method
- React Hooks Error: Hooks can only be called inside the body of a function component
- Is it possible to use React without rendering HTML?
More Query from same tag
- How to set default property values in React with Typescript?
- Why would I use 'useReduce' in react while implementing global scoped states?
- React component doesn't append newly added items to the list
- Why do some React Apps require files in the index.html folder and how to change this?
- submit form with input field validation in react.js
- ReactJS production url path setting
- AsyncFunction Error using create react app
- How to send a variable to Backend - Mern Stack
- How to pass styles via props with styled components without having to create the component inside the component
- React - change/replace string parameter of function
- "You are running create-react-app 4.0.3 which is behind the latest release (5.0.0)"
- How to delete data from table in reactjs?
- TypeError: Cannot read property 'subscribe' of undefined PersistGate.componentDidMount
- How to handle fetch API AJAX response in React
- react-hook-form and useState (toggle)
- React: how to update state.item[1] in state using setState?
- How to pass down input value during onSubmit in React?
- How to render videos with List in react-admin?
- Making a reactjs input element required by an inline condition
- CORS error when sending a request from my reactjs app to my express server, which redirects to Spotify's API
- this.props is not a function in the componentDidUpdate()
- Material UI ToolTip is not shown correctly inside a container with overflow scroll
- Keycloak CORS issue associated with login redirect
- Can we add custom validations in formik YupValidationSchema?
- how to validate props as an array of objects?
- React Hooks. Solutions for getting value of useState after setting method
- want to increase previous and next page pagination icon size in material react table
- Access input value in ReactDOM.render
- How to fix. TypeError: Cannot read property 'user' of null
- Jest testing with Node - Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout