Can you use props on React.Fragment?

Question

I know that a React Fragment can be used to group child components like this:

render() {
  return (
    <React.Fragment>
      <Foo />
      <Bar />
      <Baz />
    </React.Fragment>
  );
}

But can you add props to it? Say you want to use the spread operator:

<React.Fragment {...otherProps}>
  ...
</React.Fragment>

score 14 · Accepted Answer · answered Dec 07 '19 at 11:44

14

No, you can't. As per the React docs on Fragments:

key is the only attribute that can be passed to Fragment. In the future, we may add support for additional attributes, such as event handlers.

Therefore, if you want to add props to a wrapper component, switch to a good ol' div.

answered Dec 07 '19 at 11:44

Paul Razvan Berg

You just answered your own question as per another person's answer lol – junwen-k Dec 07 '19 at 11:50
2

@dev_junwen haha, I typed the question then randomly noticed that caveat in the React docs. Thought to proceed with asking it instead of deleting it. – Paul Razvan Berg Dec 07 '19 at 11:53

score 0 · Answer 2 · answered Dec 07 '19 at 14:28

0

Not at all because if you think to pass props like this -

<React.Fragment {...otherProps}>
....
<React.Fragment />

it means

< {...otherProps}>
</>

Which isn't right that Reactjs doesn't recommend to use like this.

answered Dec 07 '19 at 14:28

akhtarvahid

2 Answers2