score:1

Accepted answer

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>

score:1

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

Related Query

More Query from same tag