how to remove wrapper div in react js?

Question

could you please tell me how to remove wrapper div in react js ?

here is my code https://codesandbox.io/s/festive-oskar-nbwjs?file=/src/App.js

current output

 <div id="root">
   <div class="App">
      <h1>Hello CodeSandbox</h1>
      <div>
         <section>ddddd</section>
      </div>
   </div>
</div>

Expected output

<div id="root">
       <div class="App">
          <h1>Hello CodeSandbox</h1>
             <section>ddddd</section>
       </div>
    </div>

how to remove this wrapper div. <div dangerouslySetInnerHTML={createMarkup()} />;

https://stackoverflow.com/questions/48236588/using-fragment-to-insert-html-rendered-on-the-back-end-via-dangerouslysetinnerht — JBallin, Dec 24 '20 at 05:36

score 1 · Answer 1 · answered Dec 24 '20 at 05:47

I do want to disclaim any knowledge of your app's full context and could be looking at it wrong, but I want to offer a more fundamental solution. Why not simply do it like this?

import React from "react";
import "./styles.css";

export default function App() {
  const Elem = () => <section>ddddd</section>

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Elem />
    </div>
  );
}

This would certainly remove that wrapper, but again, there may be something I don't know about the app.

score 0 · Answer 2 · answered Dec 24 '20 at 05:38

0

use <React.Fragment><React.Fragment/> instead of div this will work

answered Dec 24 '20 at 05:38

Praveen kumar

55
6

1

Fragments don’t support this. – JBallin Dec 24 '20 at 05:39
https://github.com/facebook/react/issues/12014 This is a very long going question, but as per the issue, it's not resolved yet – Swaraj Gandhi Dec 24 '20 at 05:48

score 0 · Answer 3 · edited Dec 24 '20 at 06:22

0

Make it simple like:

<div className="App">
    <h1>Hello CodeSandbox</h1>
    { createMarkup() }
</div>

And change the function:

function createMarkup() {
    return <section>ddddd</section>;
}

edited Dec 24 '20 at 06:22

dhruw lalan

791
1
11
23

answered Dec 24 '20 at 05:46

Khalid Ahmed

21
3

score 0 · Answer 4 · edited Dec 24 '20 at 06:00

You'll be able to do this:

    import Parser from 'html-react-parser';
        <div>
            {Parser('<div>
                 <section>ddddd</section>
              </div>', {
                replace: (domNode) => {
                    if (domNode.name === 'div') {
                        return <section>ddddd</section>;
                    }
                }
            })}
        </div>

how to remove wrapper div in react js?

4 Answers4