CODEWITHSUNDEEP
javascriptreactjs
resteqs
resteqs

Reputation: 19

How to change a let number in react using a button

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

Upvotes: 2

Views: 417

Answers (2)

Andy
Andy

Reputation: 63587

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>

Upvotes: 1

marzelin
marzelin

Reputation: 11610

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>

Upvotes: 1

Related Questions