react shows error when submit button click

Question

I am new to React. I don't understand why it's showing an error. I need to repeat the array object but when It reaches the last array it does not restart.
https://codesandbox.io/s/generate-quote-xpu1q

index.js:

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

app.js:

import React, { useState, useEffect } from "react";
import "./styles.css";
// import { qutoes } from "./Fetch";

export default function App() {
  // const data = qutoes;
  const [data, setData] = useState("loading");
  const [index, setIndex] = useState(0);

  const qutoesBtn = () => {
    if (index === data.length - 1) {
      setIndex(0);
    } else {
      setIndex(index + 1);
    }
  };
  useEffect(() => {
    fetch("https://type.fit/api/quotes")
      .then(res => res.json())
      .then(res2 => {
        console.log(res2.slice(0, 10));
        const lists = res2.slice(0, 10);
        setData(lists);
      });
  }, []);
  return (
    <div className="App">
      <h1>Generate Quote</h1>
      <h4>
        {data === "loading" ? (
          "loading...!!"
        ) : (
          <div>
            My qutoes is ---- <br />
            <span> {data[index].text}</span> <br /> Author is --
            {data[index].author}
          </div>
        )}
      </h4>

      <button onClick={qutoesBtn}>Generate Quote</button>
    </div>
  );
}

Edgar Henriquez · Accepted Answer · 2020-04-05 15:57:12Z

3

You should change your condition to update once the index reaches data.length - 1

if (index === (data.length - 1)) {
  setIndex(0);
}

Remember that given an array [1, 2, 3] the length is 3, but the maximum index is 2 because arrays indexes start at 0, so when index is equal to the data.length React is going to try to access that position giving you the error that you're experiencing.

answered Apr 5, 2020 at 15:57

Edgar Henriquez

1,3731 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thanveer Shah · Accepted Answer · 2020-04-05 15:58:43Z

2

It is because you are not checking if the array has reached the last item in the button click, So if you don't check it in the button click then it will increment the index again before it even gets to check , So change your code to this:

const qutoesBtn = () => {
    if (index === data.length - 1) {
      setIndex(0);
    } else {
      setIndex(index + 1);
    }
  };

Here -1 refers to the last item in the array

answered Apr 5, 2020 at 15:58

Thanveer Shah

3,3442 gold badges20 silver badges37 bronze badges

Comments

user11891640 · Accepted Answer · 2020-04-05 16:01:15Z

0

I think you need a condition where if the array reaches the end Then start it back at zero

answered Apr 5, 2020 at 16:01

user11891640

Comments

Abdullah Abid · Accepted Answer · 2020-04-05 16:03:48Z

0

You wanna Check if the next item exceeds the length and you want to check it inside the qutoesBtn

 const qutoesBtn = () => {
    setIndex(index + 1);
    if (index + 1 >= data.length) {
      setIndex(0);
    }

    console.log(index);
  };

CodeSandbox here

answered Apr 5, 2020 at 16:03

Abdullah Abid

1,6613 gold badges12 silver badges24 bronze badges

Collectives™ on Stack Overflow

react shows error when submit button click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related