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](https://stackoverflow.com/questions/27934238/rendering-raw-html-with-reactjs) — Piyush, Aug 14 '20 at 06: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, Aug 14 '20 at 07:03

score 2 · Answer 1 · answered Aug 14 '20 at 06:53

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 '20 at 06:53

Bhart Supriya

262
4
16

Not element, it is a JSX. – Tazo leladze Aug 14 '20 at 06:55
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 + "
hello
" – name Aug 14 '20 at 06:56
Do you mean formula is a string ? – Bhart Supriya Aug 14 '20 at 06:57
yeah it must be a string im too far gone in this – name Aug 14 '20 at 06:58
you can directly render the string in render block right ? – Bhart Supriya Aug 14 '20 at 07:01

score 2 · Accepted Answer · answered Aug 14 '20 at 06:59

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 '20 at 06:59

Chris B.

5,477
1
12
30

This worked! My original code is constantly adding elements to formula so idk how to do that in jsx – name Aug 14 '20 at 07:07
E.g. ```var formula = "
" formula = formula + "something" formula = formula + "
"``` I'd love to know if there is a simpler way to achieve the same as above ` – name Aug 14 '20 at 07:09
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](https://reactjs.org/docs/introducing-jsx.html). – Chris B. Aug 14 '20 at 07:11

score 0 · Answer 3 · answered Aug 14 '20 at 06:57

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>
)

score 0 · Answer 4 · answered Nov 10 '21 at 12:00

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 '21 at 12:00

Abdulhakim

620
8
11

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

4 Answers4