Accepted answer

In React it is not a good idea to try to run a child method on the parent since it is mainly a sign of a bad design. Since you want to run the SVG dynamically, you could pass a prop with the path or what you need in order to load it dynamically. However, if you are adamant in running the method on the parent check out this post on how to do it.


You can create a functional child component like this:

import React, { forwardRef, useImperativeHandle } from 'react';

export default forwardRef((props, ref) => {
        () => ({
            storeExpandedRecords () {
                console.log('Storing expanded records...');
    return (

And then in your parent, you can call the child method like this:

import React, { useRef } from 'react';

const Parent = () => {
    const childRef = useRef(null);

    useEffect(() => {
        if (childRef?.current) {
    }, []);

    return (
        <Child ref={childRef} />


Define all your function in parent component and pass that as props to child component.

Try this

class UnitMonitor extends PureComponent {
  constructor() {
  state = {
    img: null,
  onChangeShcema = schemaID => {
    axios.get("/api/schemata/get-schemata-nodes/" + schemaID).then(response => {
      let path =["0"]["file"];
       this.setState({img: path});
      // call loadFile function of child component is needed
render() {
    return (
      <Row type="flex" className="">
        <Col span={25}>
          <SvgViewer onChangeShcema ={this.onChangeShcema} image={this.state.img} />

Access like this in child component

onChange={props.onChangeShcema} or onClick={props.onChangeShcema}



Use temporary props. For example click count. Handle click count in useEffect hooks methods When props.count is changed, call function )

in your child component use this code segment:

useEffect(() =>Call your function is here, [props.count ]);

Related Query

More Query from same tag