react HOC as wrapper passing props to children's element

Viewed 107

hello if the wrapper component want to pass props to children element, how do i pass the props without using react.context?

const Wrapper = ({children}) => {
//some hooks logic to be pass
const [stateWrapper, setStateWrapper] = useState(null)
  return (
    <div>
        {/* normal way to passing props */}
       <OtherComponent {...{stateWrapper, setStateWrapper}}/>
       {children}
    </div>
  )
}
const App = () => {
  return (
    <Wrapper>
      {/* want to get wrapper state and  passing it here */}
      <IneedToPassOnThisComponent 
        {...{ 
            // isPlay : stateWrapper
            // how do i get stateWrapper from Wrapper component?
        }}
      />
    </Wrapper>
  )
}

1 Answers

Use React.cloneElement:

return ( <> {
  React.cloneElement(children, {propName: "get Prop from Wrapper"})
} </>
)

Related