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

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'/>      )  }  

https://stackoverflow.com/questions/66468207/how-can-i-reference-a-function-inside-a-component-from-the-outside March 04, 2021 at 11:37AM