Ho can i return a Custom HTML div in React JS?

user_13542522 0
Viewed 1720

my purpose is to render a div that i have already created by createElement .

And I have a did that into a ReactJs function so i need to return the div but doing it like that doesn't work 

import React, { Component } from 'react';

class main extends Component {
renderList() {
                  var div = document.createElement("div");
                  var ul = document.createElement("ul");
                  div.appendChild(ul);
                return div
            }


    render() {
        return (
            <div>
               {this.renderList()} 
            </div>
        );
    }
}



export default main;

It gave me this error but when i did console.log(div) I do get

     <div>......</div>

react-dom.development.js:2317 Uncaught Error: Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead.

How can I achieve that ? thnx

reactjs html
2 Answers

Why do you try this way ? I think instead of ,

Create your renderList as react functional component and import your main extends class.

import React from 'react'

export const RenderList= () => 
{

 return (

        <div> 
            <ul>
            </ul>
        </div>
    )}

Your Main Class

import {RenderList} from 'RenderList'

    class main extends Component {

        render() {
            return (
                <div>
                  <RenderList/>
                </div>
            );
        }
    }



export default main;
user_135679060

For futur readers, for a better approach, don't use this answer... (see first comment)

You can use dangerouslySetInnerHTML as your way is dangerous

import React, { Component } from 'react';

class main extends Component {
    renderList() {
                  var div = document.createElement("div");
                  var ul = document.createElement("ul");
                  div.appendChild(ul);
                return div.outerHTML;
            }

    render() {
        return (
            <div dangerouslySetInnerHTML={{__html: this.renderList()}} />
        );
    }
}


export default main;

As said, you should privilege the react way. In something like this.

getList() {
    return (
       <ul>
         {aCustomArrayOfLi.map(aLi => (
              <li>{aLi}</li>
          ))}
       </ul>
    );
}

render() {
    <div>
       {this.getList()}
    </div>

}
user_24547900
Related