How to avoid extra wrapping in React?

Question

Today I have started learning ReactJS and after an hour faced with the problem.. I want to insert a component which has two rows inside a div on the page.A simplified exampl

Answer 1

You can use:

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

For further details refer to this documentation.

Answer 2

Here is one way to render "transculent" components:

import React from 'react'

const Show = (props) => {
  if (props.if || false) {
    return (<React.Fragment>{props.children}</React.Fragment>)
  }
  return '';
};

----


<Show if={yomama.so.biq}>
    <img src="https://yomama.so.biq">
    <h3>Yoamama</h3>
<Show>

Answer 3

Update 2017-12-05: React v16.2.0 now fully supports rendering of fragments with improved support for returning multiple children from a components render method without specifying keys in children:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

If you are using a React version prior to v16.2.0, it is also possible to use <React.Fragment>...</React.Fragment> instead:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

---

Original:

React v16.0 introduced returning an array of elements in render method without wrapping it in a div: https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

At the moment, a key is required for each element to avoid the key warning but this could be changed in future releases:

In the future, we’ll likely add a special fragment syntax to JSX that doesn’t require keys.

Answer 4

Use [], instead of ()'s to wrap the entire return.

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}

Answer 5

I know this question has been answered, you can of course use React.Fragment which doesn't create a node but let's you group stuff like a div.

Additionally if you want to have fun you can implement (and learn lots of things) a React mode that removes the extra div's and for this I really want to share a great video on how you can do it on the react code base itself.

https://www.youtube.com/watch?v=aS41Y_eyNrU

This is of course not something that you would do in practice but it's a good learning opportunity.

Answer 6

I created a component to wrap child components without a DIV. It's called a shadow wrapper: https://www.npmjs.com/package/react-shadow-wrapper