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>
    );
}
  1. you can pass with any state manager: redux, mobx e.g.

Related Query

More Query from same tag