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

Question

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

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
– Adriano Repetti, Commented May 19, 2020 at 15:15
How do you use renderList()? If it is like { renderList() } then most probably you need to return from that function a valid JSX. — norbitrial
– norbitrial, Commented May 19, 2020 at 15:15
Where/how are you using this in React? And why are you using document.createElement instead of just using React components? — David
– David, Commented May 19, 2020 at 15:16
I have to use createElement because i am building according to an algorithm either <ul> or <li> . I have edited — suuuustt
– suuuustt, Commented May 19, 2020 at 15:25
@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
– David, Commented May 19, 2020 at 15:28

Bahtiyar · Accepted Answer · 2020-05-19 15:52:43Z

3

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;

edited May 19, 2020 at 15:52

answered May 19, 2020 at 15:36

Bahtiyar

1921 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

suuuustt Over a year ago

u have right thank uu i will try to make it possible to work like that

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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>

}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 19, 2020 at 15:27

BENARD Patrick

31k16 gold badges104 silver badges109 bronze badges

3 Comments

BENARD Patrick Over a year ago

As mentionned, it's dangerously, even if you think your way is better, it's the worst...

suuuustt Over a year ago

Thank u Patrick actually this is the solution and as you said it works but in dangerous way so i will look how can i use the safe way

BENARD Patrick Over a year ago

@suuuustt, here is an exemple, if you can provide a context, any variable, a better exemple could be provided.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

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

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

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

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related