Use Dynamic Wrapper for children React-CodePudding

I want to use a component passed from the props to wrap children, if defined.

function Example({ wrapper }) {
  return (
    // Wrap this with `wrapper`, only if it is defined, else don't wrap.
    <Child></Child>
  )
}

How can this we be done?

CodePudding user response：

Try:

function Example({ wrapper, children }) {
  const Wrapper = wrapper || React.Fragment; // custom components should start with capital letter
  return (
    <Wrapper>
     {children}
    </Wrapper>
  )
}

CodePudding user response：

You can do this way

function Example({ wrapper }) {
  if(wrapper) {
    const Wrapper = wrapper //to make it alike component
    return <Wrapper><Child></Child></Wrapper>
  }
  return (
    <Child></Child>
  )
}

CodePudding user response：

return(wrapper ? <wrapper><Child></Child></wrapper> : <Child></Child>)