How to stop any action if index of array is not available in count-CodePudding

I'm displaying objects from the array. example :

export default function App() {
  const data = [
    { id: 1, more: "string 1" },
    { id: 2, more: "string 2" },
    { id: 3, more: "string 3" }
  ];
  // here if index becomes 4 it breaks as there is no object in the data with index 4 
  const [index, setIndex] = React.useState(0); 
  const submitHandler = () => {
  // probably there we need any type of if statement but I don't; know how to compare with index
    setIndex(index   1);
  };

  const showDat = (data, index) => {
    return <p>{data[index].more}</p>;
  };

  return (
    <div className="App">
      <Container>
        <Col md={8}>
          <Card style={{ minHeight: "40rem" }}>
            {showDat(data, index)}
            <Card.Footer>
              <Button
                variant="outline-danger"
                onClick={submitHandler}
                className="mx-1"
              >
                {" "}
                Skip
              </Button>
              <Button variant="primary" onClick={submitHandler}>
                {" "}
                Continue
              </Button>
            </Card.Footer>
          </Card>
        </Col>
      </Container>
    </div>
  );
}

The problem is if index is not available in the array then code breaks and I want to add error handling, like if index is not equal then make the continue button disable or something like that.

So how can I compare the count of index of the array to index state ? Running Example in CodeSandBox

CodePudding user response：

You can add disabled={data.length - 1 === index} in 2 buttons to disable them whenever the index is at max of data length

Full change

import "./styles.css";
import { Container, Col, Card, Button } from "react-bootstrap";
import React from "react";

export default function App() {
  const data = [
    { id: 1, more: "string 1" },
    { id: 2, more: "string 2" },
    { id: 3, more: "string 3" }
  ];

  const [index, setIndex] = React.useState(0);
  const submitHandler = () => {
    setIndex(index   1);
  };

  const showDat = (data, index) => {
    return <p>{data[index].more}</p>;
  };

  return (
    <div className="App">
      <Container>
        <Col md={8}>
          <Card style={{ minHeight: "40rem" }}>
            {showDat(data, index)}
            <Card.Footer>
              <Button
                variant="outline-danger"
                onClick={submitHandler}
                className="mx-1"
                disabled={data.length - 1 === index}
              >
                {" "}
                Skip
              </Button>
              <Button variant="primary" onClick={submitHandler} disabled={data.length - 1 === index}>
                {" "}
                Continue
              </Button>
            </Card.Footer>
          </Card>
        </Col>
      </Container>
    </div>
  );
}

CodePudding user response：

            export default function App() {
              const data = [
                { id: 1, more: "string 1" },
                { id: 2, more: "string 2" },
                { id: 3, more: "string 3" }
              ];
              // here if index becomes 4 it breaks as there is no object in the data with index 4 
              const [index, setIndex] = React.useState(0); 
              const submitHandler = () => {
              // probably there we need any type of if statement but I don't; know how to compare with index
             // This condition can prevent to crash the code, even though you can add your own logic here, or you can apply same functionality on "Continue" button disable attribute I had commented it on below button
              //if (index  < data.length-1)
                if (index   1 < data.length)
                setIndex(index   1);
              };
            
              const showDat = (data, index) => {
                return <p>{data[index].more}</p>;
              };
            
              return (
                <div className="App">
                  <Container>
                    <Col md={8}>
                      <Card style={{ minHeight: "40rem" }}>
                        {showDat(data, index)}
                        <Card.Footer>
                          <Button
                            variant="outline-danger"
                            onClick={submitHandler}
                            className="mx-1"
                          >
                            {" "}
                            Skip
                          </Button>
                          <Button 
                           disabled={index   2 > data.length ? true 
                           : false} 
                           //disabled={index >= data.length - 1 ? 
                           true : false}
                           variant="primary"  
                           onClick={submitHandler}
                           >
                            {" "}
                            Continue
                          </Button>
                        </Card.Footer>
                      </Card>
                    </Col>
                  </Container>
                </div>
              );
            }
    
  Sandbox link :[CodeSandBox][1]


  [1]: https://codesandbox.io/s/intelligent-oskar-t93mnx?file=/src/App.js