Is it possible to set a String as html element then use innerhtml on it in react?

Question

import React from "react";

class App extends React.Component {
    render() {

        var formula = "<div> hello </div>"
        
        const div = document.createElement("div")
        div.innerHTML = formula

        return (

            <div>

                {div}

            </div>



        );
    }
}

export default App;

I get an error

Error: Objects are not valid as a React child (found: [object HTMLLIElement]). If you meant to render a collection of children, use an array instead.

Basically the string has html elements I want to set inner html to the div constant. Right now yeah its relatively simple I just need to know if this can be done

My original code has something like this littered throughout my code in recursions too

var formula = "<div>"
formula = formula + "something"
formula = formula + "</div>

Does this answer your question? Rendering raw html with reactjs — Piyush
– Piyush, Commented Aug 14, 2020 at 6:55
react is used so that we don't need to manipulate the DOM directly using the getElementById etc like native JS. react has virtual DOM in memory and it will re-render when there is a change in state. If you surely want to manipulate DOM and know what you are doing, use a ref using useRef() hook — Kevin Moe Myint Myat
– Kevin Moe Myint Myat, Commented Aug 14, 2020 at 7:03

Chris B. · Accepted Answer · 2020-08-14 06:59:48Z

2

This cannot be done this way in React. A component can only return a ReactElement or JSXElement. If for some reason you absolutely need to set HTML from a string (there are reasons for this), you have to use dangerouslySetInnerHTML which was made for that precise purpose, but exposes potential security vulnerabilities as explained in the documentation.

You can accomplish this as detailed in the official example:

import React from "react";

class App extends React.Component {
 
    createMarkup() {
       return {__html: 'Hello'};
    }

    render() {

        return (

            <div dangerouslySetInnerHTML={createMarkup()}/>

        );
    }
}

export default App;

But again, this is discouraged and I'm curious to know why you can't just return JSX markup as the other answers suggest.

answered Aug 14, 2020 at 6:59

Chris B.

5,7711 gold badge17 silver badges31 bronze badges

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

3 Comments

name Over a year ago

This worked! My original code is constantly adding elements to formula so idk how to do that in jsx

name Over a year ago

E.g. var formula = "<div>" formula = formula + "something" formula = formula + "</div>" I'd love to know if there is a simpler way to achieve the same as above `

Chris B. Over a year ago

Please post your full code. There are certainly much simpler ways to do this with React. But before going further I would give a thorough read through of their documentation.

Bhart Supriya · Accepted Answer · 2020-08-14 06:53:36Z

2

You don't need to create a element you can directly use :

   class App extends React.Component {
       render() {

           const formula =<div> hello </div>
           
          
           return (

               <div>

                   {formula}

               </div>



           );
       }
   }

   export default App;

answered Aug 14, 2020 at 6:53

Bhart Supriya

2621 gold badge4 silver badges18 bronze badges

5 Comments

Tazo leladze Over a year ago

Not element, it is a JSX.

name Over a year ago

In my original code this wont work because formula isn't a const its a variable that I constantly add stuff too along the way i.e. `formula = formula + "<div> hello </div>"

Bhart Supriya Over a year ago

Do you mean formula is a string ?

name Over a year ago

yeah it must be a string im too far gone in this

Bhart Supriya Over a year ago

you can directly render the string in render block right ?

Pinnci · Accepted Answer · 2020-08-14 06:57:29Z

0

Why are you creating div like that? I’m begginer in ReactJs ,but I think you shouldn’t touch / create HTML DOM Elements like that at all or if it is not neccesary.

You can simply just do this .

Let formula = <div> hello </div>

Return(
  <div>
    {formula}
  </div>
)

answered Aug 14, 2020 at 6:57

Pinnci

4633 gold badges8 silver badges24 bronze badges

Comments

Abdulhakim · Accepted Answer · 2021-11-10 12:00:47Z

0

You can do it with useState.

import {useState} from "react";

const App = () => {

  const [formula, setFormula] = useState("");

  setFormula(<div> 'hello' </div>);


  return(
    <div>
      {formula}
    </div>
  );
}

export default App;

answered Nov 10, 2021 at 12:00

Abdulhakim

76810 silver badges13 bronze badges

Collectives™ on Stack Overflow

Is it possible to set a String as html element then use innerhtml on it in react?

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related