Multi step form using react hooks

Question

There's a project I am working on. I have a challenge in implementing something.

I have four arrows to show the progress of a form which is Active-Next-Inactive-Completed. Each state should be distinguished using different colours on the arrows.

Then when one clicks on a button after filling each form, the person will be taken to next page and arrow state should change too.

I have designed the arrows, created the css styles, the button clicks takes to next page but my challenge is to make the arrows to change too at the same time. Image

import React,{useState} from 'react'
import SelectOption from '../customSelect/SelectOption'
import './arrow.css'
import Component1 from './Component1'
import Component2 from './Component2'
import Component3 from './Component3'
import Component4 from './Component4'

const Arrow = () => {

const[page, setPage] = useState(1)

function goNextPage(){
    setPage(page => page + 1)
}

function goBackPage(){
    setPage(page => page - 1)
}

const [style, setStyle]=useState(false)

return (
<div className="parent-div">

<div className="arrow-container">
    <div className="arrow-div">
    <div className={style ? "buyToken-completed" : "active" }>
            <p>Component 1</p>
        </div>
    </div>
    <div className="arrow-div">
        <div className={style ? "next" : "active"}>
            <p>Component 2</p>
        </div>
    </div>
    <div className="arrow-div">
        <div className={!style ? "inactive" : "active"}>
            <p>Component 3</p>
        </div>
    </div>
    <div className="arrow-div">
        <div className={style ? "view-receipt-next" : "view-receipt- 
completed"}>
            <p>Component 4</p>
        </div>
    </div>
</div>

    <div className="component-div">
        <div className='display'>
            {page === 1 && <Component1 /> }
            {page === 2 && <Component2 /> }
            {page === 3 && <Component3 />}
            {page === 4 && <Component4 />}
        </div>

        <button onClick={goBackPage} className='btns'>Back</button>
        <button onClick={goNextPage}>Next</button>
    </div>   
 </div>
 )
 }

export default Arrow

Please provide enough code so others can better understand or reproduce the problem. — Jose Lora, Feb 25 '22 at 13:18

score 0 · Accepted Answer · answered Feb 25 '22 at 13:59

you can use the same variables that you use to change the style depending on which page you are, the same as you switch between components but in this case, you will add an extra condition to check if the page is less than the current page if it less is because is still inactive or incomplete, but it is more is because is completed:

import React,{useState} from 'react'
import SelectOption from '../customSelect/SelectOption'
import './arrow.css'
import Component1 from './Component1'
import Component2 from './Component2'
import Component3 from './Component3'
import Component4 from './Component4'

const Arrow = () => {

    const[page, setPage] = useState(1)
    
    function goNextPage(){
        setPage(page => page + 1)
    }
    
    function goBackPage(){
        setPage(page => page - 1)
    }
    
    const [style, setStyle]=useState(false)
    
    return (
    <div className="parent-div">
    
    <div className="arrow-container">
        <div className="arrow-div">
        <div className={page === 1 ? "active" : "completed" }>
                <p>Component 1</p>
            </div>
        </div>
        <div className="arrow-div">
            <div className={page === 2 ? "active" : (page < 2 ? "inactive" : "completed")}>
                <p>Component 2</p>
            </div>
        </div>
        <div className="arrow-div">
            <div className={page === 3 ? "active" : (page < 3 ? "inactive" : "completed")}>
                <p>Component 3</p>
            </div>
        </div>
        <div className="arrow-div">
            <div className={page === 4 ? "active" : "inactive"}>
                <p>Component 4</p>
            </div>
        </div>
    </div>
    
        <div className="component-div">
            <div className='display'>
                {page === 1 && <Component1 /> }
                {page === 2 && <Component2 /> }
                {page === 3 && <Component3 />}
                {page === 4 && <Component4 />}
            </div>
    
            <button onClick={goBackPage} className='btns'>Back</button>
            <button onClick={goNextPage}>Next</button>
        </div>   
     </div>
     )

 }

export default Arrow

@Annie Remember to click on the check under the answer counter to mark this is the answer that you were looking for and good look with your project. — Jose Lora, Feb 25 '22 at 16:02

Multi step form using react hooks

1 Answers1