Multi step form using react hooks-CodePudding

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

CodePudding user response：

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