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

1
votes

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

2
htmlreactjs
Your code really does not help to reproduce the problem you describe. With that said: in React usually you do not create elements directly with createElement(). If you have one (there are a FEW cases) then you should use a portal to render React code inside it. My gut feeling is: drop HTML DOM manipulation and write React code. - Adriano Repetti
How do you use renderList()? If it is like { renderList() } then most probably you need to return from that function a valid JSX. - norbitrial
Where/how are you using this in React? And why are you using document.createElement instead of just using React components? - David
I have to use createElement because i am building according to an algorithm either <ul> or <li> . I have edited - suuuustt
@suuuustt: The real solution here is probably to use React components as they're intended to be used. The code in the question doesn't really demonstrate why you can't. Just use JSX elements like you're already using in render. - David

2 Answers

2
votes

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;
0
votes

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>

}