How to change props in a component passed into another component as props

Question

I have a Screens component being passed into a Modal component as the screens prop. Inside Modal I'm rendering it thusly...

{props.screens()}

This displays fine but I need a way to change the Screens components props from within Modal.

Answer 1

You could use React.cloneElement , which allows you to clone an element and add new props.

function myComponent(props) {

return <> {React.cloneElement(props.screens, {someNewProp:"value"}, children)} </>;

}