Implement Steps In React

S ometimes, we need to show the steps in our React component, In this article, we will show you how to make Steps based Component in just 2 minutes. This will be a very quick implementation to add Steps to your React page.
In this article, we will make Steps that will denote the different React Components. In this implementation, we will make the Steps, when you click on the different Steps, the different React Component will be rendered. Also we will call a function when your click on the Steps.
So, let's get started.

Create the Components to implement steps in React:

In this article, we will create 3 component, a parent component that will contain the Steps, and other two component will be Child Components, that will be rendered based on the Steps state.
Create a file named, StepsComponent.js. In the file StepsComponent.js, lets create our parent component. (We will have our all 3 Components in the same file, you can keep all the Components in different fils.)

                    
                    
                        import React, { PureComponent } from 'react';
                        import { Card,Steps } from 'antd';
                        import 'antd/dist/antd.css';
                        const { Step } = Steps;
                    
                        class StepsComponent extends PureComponent {
                    
                        state = {
                          currentStep: 0
                        }
                      
                        onStepperClicked = (obj) => {
                          console.log('changed', obj, this.state.currentStep);
                          this.setState({ currentStep: obj })
                        }
                      
                        steps = [
                          {
                            title: 'Choose Item',
                            content: <ComponentA />,
                          },
                          {
                            title: 'Make Payment',
                            content: <ComponentB />,
                      
                          }
                        ];
                      
                        render() {
                          const { currentStep } = this.state;
                          console.log('Render currentStep :',currentStep);
                          return (
                            <div style={{width:'500px', margin:'200px'}}>
                              <Steps
                                size='small'
                                current={currentStep}
                                onChange={this.onStepperClicked}
                              >
                                {this.steps.map((item, index) =>
                                  <Step key={item.title} title={item.title} />
                                )}
                              </Steps>
                              <div style={{marginTop:'50px'}}>{this.steps[currentStep].content}</div>
                            </div>
                          );
                        }
                      }
                      
                      export default StepsComponent;
                      
                    

Output:

Implement Steps In React