How to use react fragment

When I took a review from other engineers, I knew it. In order not to forget about it, I’ll take a note.

The document

Fragments - React

When we use it

Render method in react demands using one tag at least like below.

render() {
  return (<div>hello world</div>)
} // works
render() {
  return (hello world)
} # not works

Basically, we can deal with a lot of situation with this tag ‘div’. However, sometimes it is difficult to do that. The example is below.

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

and

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

In this case, the code becomes like below.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

The solution is

class Columns extends React.Component {
  render() {
    return (
      <>        
        <td>Hello</td>
        <td>World</td>
      </>    );
  }
}

The output is like this.

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

My LinkedIn account is below! Please contact me!

https://www.linkedin.com/in/tomoharu-tsutsumi-56051a126/