Sat. Mar 25th, 2023

[ANSWERED] javascript – how do you use and change innerHTML in react?

By

Nov 20, 2022 innerhtml, javascript, reactjs

Solution 1 :

In React you just modify state and DOM is updated automatically. Your example could look something like below. There is no need to update html directly.

You can also check this introductory tutorial which shows main React concepts.

class ReactTypeWriter extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this);
        this.state = { text: ""};
    }

    handleClick() {
        var i = 0;
        var txt = 'Lorem ipsum dummy text blabla.';
        var speed = 50;
        let typeWriter = () => {
            if (i < txt.length) {
                this.setState({ text: txt.substring(0, i++) });
                setTimeout(typeWriter, speed);
            }
        };
        typeWriter();
    }
  
  render() {
    return (
      <div>
        <h1>Typewriter</h1>
          <button onClick={this.handleClick}>Click me</button>
          <p id="demo">{this.state.text}</p>
      </div>
    )
  }
}

ReactDOM.render(<ReactTypeWriter />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Problem :

I recently started using react, and most of it works wonders, but i really cannot understand hhow youre supposed to change html dynamically

Heres some example code i tried to create:

var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

It seems next to impossible to do in react, which is weird since i got the impression that these kinds of things should be easier in reacy.
You can run the code here

Comments

Comment posted by Daan

You should render the HTML from the state, and then upon updating the state it automatically re-renders.

Comment posted by CanUver

what do you need inner html when using react ? you can trigger and use everything that comes into your mind when you want to render it using components.

Comment posted by jsfiddle.net/9uzqLkax

I wrote an example for you to better understand ReactJS:

Comment posted by Raul Rene

The idea of React is to let it handle DOM mutations, not doing them yourself. The whole idea behind it was that DOM mutations make the browser run slow, thus it’s better that you handle the computing part and let the framework handle DOM mutations on its own. There is nevertheless a

By

Related Post

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022