Page freezes when creating component from props - reactjs

Question

I am creating the Screens component in one file then passing it into the Modal component. Inside Modal I am trying to use Screens. Screens takes an index prop to tell it what to display. If I display props.screens (the Screens component) it works but I don't see a way to pass in props. If I try to display (screens) => () everything freezes.
File where Screens is defined...
const Screens = (props) => {
let index = props !== undefined ? props.index.idx : 0;
const [contentData, setContentData] = useState({});
let [indexState, setIndexState] = useState(index);
console.log(`indexState: ${indexState}`)
const onChange = (e) => {
const newData = {
...contentData,
[e.target.id]: e.target.value
}
setContentData(newData)
};
const Screen1 = () => {
return (
<>
<input type="text" id="screen1_input1" onChange={onChange} />
<br />
one
</>
)
};
const Screen2 = () => {
return (
<>
<input type="text" id="screen2_input1" onChange={onChange} />
<br />
<input type="text" id="screen2_input2" onChange={onChange} />
<br />
two
</>
)
};
const content = [
Screen1,
Screen2
];
return (
<>
<h2 className="screens">
{content[indexState]()}
</h2>
</>
);
}
This gets passed into as props.screens.
Modal.js
...
const screens = props.screens;
const Screens = (screens) => (<Screens index={{idx:0}}/>);
...
return (
{screens()} // works but doesn't let me pass in props
{Screens} // everything freezes
)
Really I just need a way to use Screens in Modal in a way that lets me dynamically send it props.

Answer 1

There is a lot of ways you could go about this, but here's just one:
// Modal.jsx
const Modal = ({ componentToRender }) => (
...JSX before component
{componentToRender()}
..JSX after component
)
// File where Modal is being rendered
const SomeComponent = () => <Modal componentToRender={() => <Screen id={1} />} />
There's a very large number of other ways to implement this same exact thing, you're more or less implementing a higher order component by the way you describe Modal.
Your original implementation in the second instance would work just fine, but you need to call Screens to get the returned component from the function:
...
const Screens = (screens) => (<Screens index={{idx:0}}/>);
...
return (
{Screens()}
)