score:1

Accepted answer

you don't actually need an useeffect to achieve that, also change your <a> tag to a <button>

working snippet:

    function app() {
      const [value, setvalue] = react.usestate(1);
      const slides = ["one", "two", "thre"];

      const prev = () => {
        if (value > 1) setvalue(value - 1);
      };

      const next = () => {
        if (value < slides.length) setvalue(value + 1);
      };

      return (
        <div classname="slider">
          <button classname="prev" onclick={prev}>
            previous
          </button>
          <h2>barking road, london {value}</h2>
          <button classname="next" onclick={next}>
            next
          </button>
        </div>
      );
    }

    const rootelement = document.getelementbyid("root");
    reactdom.render(<app />, rootelement);
    <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>

score:1

just update like this:

  const prev = () => {
    if (value <= 1) return;
    setvalue(value - 1);
  };

  const next = () => {
    if (value >= slides.length) return;
    setvalue(value + 1);
  };

and change tag by other tag: https://codesandbox.io/s/stupefied-robinson-yjmkm?file=/src/app.tsx


Related Query

More Query from same tag