I built an animated box and stored chart inside. The chart will be responsive with animation.

I control responsiveness with this code in the chart component.

  onclick = function () {
  myChart.resize();
};

The problem is when dealing with multiple charts. I built a chart stored in the other animated box. I want to resize these two charts by clicking on them, but it doesn't work.

I've been trying to figure out how to pass data between components, but so far I can't seem to get it to work. Does anyone have a better way to do this?

・This is my code

https://codesandbox.io/s/echarts-test2-3vg2t?file=/src/chart.js

CodePudding user response：

Regarding Data and how it can be accessed in Sibling Components.

We must note few things about React.

1. React follows one-way data flow (which means data is passed via props to children from the parent and not the other way around).
2. Using only React(without any library), We can access data within siblings when we have data in the individual components. So, you would need to lift the state up (Use all the components data in the parent component and pass them as props).
3. The other option is to use a library like Redux which has single source of truth and all the data is in Store from which components can directly access the data without passing props down (or without prop-drilling).
4. The same can be achieved by using React-Hooks and Context API in React.

These official docs from react can be helpful:

1. https://react-redux.js.org/introduction/getting-started
2. https://reactjs.org/docs/hooks-reference.html