How to change a let number in react using a button

user_13811208 0
Viewed 87

I'm trying to change the value of let showtext to change the text that is displayed.
When I change the value of showtext in code the text changes, but the variable doesn't change when I click the button.

// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable no-eval */

import * as React from "react";
import "../../../styles/colour_sdgs.css";
import "../../../styles/infotext.css";
import Logo from "../../../SDGLogos/Goal-06.png";

let showtext = 1;
const sdg = "sdg06";
const text = {
    1: `text1`,
    2: `text2`,
};

function incrementCount(): void {
    showtext++;
}

function decrementCount(): void {
    showtext--;
}

export const sdg06infotext = (): JSX.Element => {
    return (
        <div>
            <div className={`colour_${sdg}`}>
                <div className="header">
                    Hochwertige Bildung <img className="sdglogo" alt="logo" src={Logo} />
                </div>
            </div>
            <div className="infotextbox">
                <p> {text[showtext]} </p>

                <p>blabla</p>
                <p>
                  other text
                </p>
            </div>
            <button type="button" onClick={incrementCount}>
                {showtext}+
            </button>
            <button type="button" onClick={decrementCount}>
                {showtext}-
            </button>
        </div>
    );
};
reactjs javascript
2 Answers

showtext does change on the button click; what doesn't change is React element tree and therefore the DOM stays the same - in other words the state of your app is out of sync with the view. You need to tell React to rerender on showtext change.

To make it work you need to move showtext and the functions that use it inside of the component and make it a state value:

const sdg = "sdg06";
const text = {
    1: `text1`,
    2: `text2`,
};

const Sdg06infotext = () => {
    let [showtext, setText] = React.useState(1);

    function incrementCount(): void {
        setText(++showtext);
    }

    function decrementCount(): void {
        setText(--showtext);
    }
    return (
        <div>
            <div className={`colour_${sdg}`}>
                <div className="header">
                    Hochwertige Bildung
                </div>
            </div>
            <div className="infotextbox">
                <p> {text[showtext]} </p>

                <p>blabla</p>
                <p>
                  other text
                </p>
            </div>
            <button type="button" onClick={incrementCount}>
                {showtext}+
            </button>
            <button type="button" onClick={decrementCount}>
                {showtext}-
            </button>
        </div>
    );
};

ReactDOM.render(<Sdg06infotext/>, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

user_56644340

If you're running a version of React (16.8.0 or above) that supports hooks you can use useState to maintain the count.

const { useState } = React;

function Example() {

  const [ count, setCount ] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

  return (
    <div>
      <p>text{count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

user_13770020
Related