CODEWITHSUNDEEP
javascriptreactjscomponents
AnApprentice
AnApprentice

Reputation: 110960

In React, how to pass an element as a Prop and Render without wrapping an element around it?

I'm using React 16.2. I have a component to render a popup window which works like so:

<WindowPopOut
  trigger={<Button>Open Window PopUp</Button>}
  ....
/>

And then...

class WindowPopOut extends Component {
  ...
  render() { 
    const clonedTrigger = React.cloneElement(trigger, {
      onClick: this.handleTriggerClick,
    });
    return (
      <div>
        {clonedTrigger}
        ...
      </div>
    );
  }
}

The problem is this renders in the DOM like so:

<div><Button>Open Window PopUp</Button></div>

How can I make WindowPopOut render without the DIV wrapping? So the component simply renders:

<Button>Open Window PopUp</Button>

Upvotes: 0

Views: 66

Answers (1)

bluesixty
bluesixty

Reputation: 2407

Have you tried wrapping with a React.Fragment?

return (
  <React.Fragment>
    {clonedTrigger}
    ...
  </React.Fragment>
);

React docs

Upvotes: 3

Related Questions