React Suite Steps Error Status

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Steps is a navigation bar that guides users through the steps of a task.

Error Status in Steps is used to show the error. It creates a Red Cross against the step that caused the error.

Syntax:

<Steps current={Index of Incorrect Step} currentStatus="error">
   <Steps.Item title="Some Title" />
</Steps>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

Project Structure: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

In this example, we will create Steps for publishing an article on GFG using React suite Steps. Since there was a lot of plagiarism in the article, reviewers discarded it. Hence, that step is shown with an error.

JavaScript

import react from 'react'
import Steps from 'rsuite/Steps';
import 'rsuite/dist/rsuite.min.css';

import ExploreIcon from '@rsuite/icons/Explore';
import InfoOutlineIcon from '@rsuite/icons/InfoOutline';
import ReviewPassIcon from '@rsuite/icons/ReviewPass';
import ReviewIcon from '@rsuite/icons/Review';
export default function App() {
  return (
    <div className="App">
    <h1 style={{color:'green'}}>GeeksforGeeks</h1>
    <h3>React Suite Steps Error Status</h3>

     <Steps current={3} currentStatus="error">
    <Steps.Item title="Pick Article" icon={<ExploreIcon />}
       description="You need to pick the article" />
    <Steps.Item title="Pending Review" icon={<InfoOutlineIcon />}
       description="Write article,and submit it for review" />
    <Steps.Item title="In-Review" icon={<ReviewIcon />}
       description="Reviewers checks your article" />
    <Steps.Item title="Not Published"
      description="Lots of plagiarism found.Article is not published" />
  </Steps>


    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will show how can use customized error icons to show error status. All the steps below are made in error status using status=” error”, however, we have provided different styling to each of them. 

We will show 3 different types of error styling. One is showing a simple error that we have seen in the previous example. Step 2, is showing a square error icon with red background and white boundaries. Step 3, has a circular error icon.

JavaScript

import react from 'react'
import Steps from 'rsuite/Steps';
import 'rsuite/dist/rsuite.min.css';
import WarningRoundIcon from '@rsuite/icons/WarningRound';

import CloseOutlineIcon from '@rsuite/icons/CloseOutline';
export default function App() {
    return (
        <div className="App">
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>React Suite Steps Error Status</h3>

            <Steps >
                <Steps.Item title="OTP Verification"
                    status="error" description="Failed" />
                <Steps.Item title="Email Verification"
                    status="error" icon={
                    <CloseOutlineIcon style={{
                        color: 'white',
                        background: 'red',
                        height: '150%',
                        width: '100%'
                    }} />}
                    description="Failed" />
                <Steps.Item title="Call Verification"
                    status="error" icon={
                    <WarningRoundIcon style={{
                        height: '150%', width: '100%' }} />}
                        description="Failed" />
            </Steps>
        </div>
    );
}

Output:

Reference: https://rsuitejs.com/components/steps/#error-status