How can I reference a function inside a component from the outside?

Question

I have an array of fragments that I'm passing into ChildComponent. The fragments must have onChange attributes set to a handler that exists inside the ChildComponent, but as they are written outside of it doing so breaks the app. I can't define the fragments inside ChildComponent and I can't define ChildComponent inside ParentComponent. How do I do this properly?

const fragments = [
    const Screen1 = () => {
        return (
            <>
                <input type="text" id="screen1_input1" onChange={onChangeHandler} />
            </>
        )
    };
    const Screen2 = () => {
        return (
            <>
                <input type="text" id="screen2_input1" onChange={onChangeHandler} />
            </>
        )
    };
]

ChildComponent.js

const ChildComponent = (props) => {
        let index = props.index
        const fragments = props.fragments
        
        const onChange = (e) => {
            //whatever
        }
        
        
        return (
            <>
                <h2 className="screens">
                    {fragments[index]()}
                </h2>
            </>
        )
    }

ParentComponent.js

import ChildComponent from './ChildComponent'

const ParentComponent = (props) => {
    let index = 3
    
    return (
        <ChildComponent index='3'/>
    )
}

Nithish · Accepted Answer · 2021-03-04 04:07:29Z

1

You can convert fragments array into a function which takes onChangHandler and return an array itself.

Below is the refactored code, for simplicity I'm just logging the input element id and the value that's being inputted.

const { Fragment } = React;

const fragments = (onChangeHandler) =>
  [
    <input type="text" id="screen1_input1" onChange={onChangeHandler} />,
    <input type="text" id="screen2_input1" onChange={onChangeHandler} />
  ];

const ChildComponent = ({ index, fragments }) => {
  const onChange = e => {
    const { target: {id, value} } = e;
    console.log(id, value);
  };

  return (
    <Fragment>
      <h2 className="screens">{fragments(onChange)[index]}</h2>
    </Fragment>
  );
};

const ParentComponent = props => {
  return <ChildComponent index={1} fragments={fragments}/>;
};

ReactDOM.render(<ParentComponent />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

<div id="react"></div>

edited Mar 4, 2021 at 4:07

answered Mar 4, 2021 at 4:00

Nithish

6,1273 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S.W. Over a year ago

One thing though, now the first input on each fragment is synchronized? If you type something into one it shows up in the other...

Nithish Over a year ago

Sorry, You want to synchronise both the inputs, is that what you are looking for?

Sohaib · Accepted Answer · 2021-03-04 04:00:04Z

Define fragments like this

const fragments = [
    const Screen1 = (onChangeHandler) => {
        return (
            <>
                <input type="text" id="screen1_input1" onChange={onChangeHandler} />
            </>
        )
    };
    const Screen2 = (onChangeHandler) => {
        return (
            <>
                <input type="text" id="screen2_input1" onChange={onChangeHandler} />
            </>
        )
    };
]

ChildComponent.js

const ChildComponent = (props) => {
        let index = props.index
        const fragments = props.fragments
        
        const onChange = (e) => {
            //whatever
        }
        
        
        return (
            <>
                <h2 className="screens">
                    {fragments[index](onChange)}
                </h2>
            </>
        )
    }

Collectives™ on Stack Overflow

How can I reference a function inside a component from the outside?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related