[Solved]-How to avoid extra wrapping <div> in React?-Reactjs

you won't be able to get rid of that div element. react.render() needs to return one valid dom node.

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>

there is workaround too. the below block code generates fragment without the need of react.fragment.

return [1,2,3].map(i=>{
if(i===1) return <div key={i}>first item</div>
if(i===2) return <div key={i}>second item</div>
return <div key={i}>third item</div>
})

this is still required, but react now make sure to create elements without creating an additional dom element.

the extra wrapping needed (normally with a parent div) because reacts createelement method require a type parameter which is either a tag name string (such as 'div' or 'span'), a react component type (a class or a function). but this was before they introduce react fragment.

refer this new api doc for createelement

react.createelement : create and return a new react element of the given type. the type argument can be either a tag name string (such as 'div' or 'span'), a react component type (a class or a function), or a react fragment type.

here is the official example, refer react.fragment.

render() {
  return (
    <react.fragment>
      some text.
      <h2>a heading</h2>
    </react.fragment>
  );
}

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.

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

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>
  ]
}

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.

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.