Changing className in react based on button click while avoiding more if / elses

Got a small project that I've been working on for past couple weeks. Basic premise is that there is a stepper with steps. User can click on each of them and get a description of what are his to-do's of each step. There is also a button to complete the step. At the moment I am stuck on the part with making the button work properly.

What I want: When user clicks button to complete step, that stepper item changes its styling (This case classname) to appear as if its complete, and the button get disabled for next step.

I'm now at the point with many if/elses that I no longer have any clue how to finish this task and even if I was to rewrite the if's and else's in a different way I have no clue how as I am pretty new to react.

Some code snippets: My parent component.

class UserPage extends Component {
state = {
    currentStep: 1,
    pendingApproval: false
}

clickHandler(e, step) {
    e.preventDefault();
    this.setState({ currentStep: step })
}

incrimentStep(e, step) {
    e.preventDefault();
    this.setState({ currentStep: step, pendingApproval: true })
}

render() {
    return (
        <Grid>
            <Grid.Row columns={1}>
                <Grid.Column stretched>
                    <Stepper
                        clickHandler={this.clickHandler.bind(this)}
                        steps={this.props.user.process.steps}
                        pendingApproval={this.state.pendingApproval}
                    />
                </Grid.Column>
            </Grid.Row>

            <Grid.Row columns={1}>
                <Grid.Column stretched>
                    <Steps currentStep={this.state.currentStep} steps={this.props.user.process.steps} />
                    <StepButton
                        incrimentStep={this.incrimentStep.bind(this)}
                        currentStep={this.state.currentStep}
                        steps={this.props.user.process.steps}
                        pendingApproval={this.state.pendingApproval}
                    />
                </Grid.Column>
            </Grid.Row>
        </Grid>
    )
}
}

export default UserPage;

My child component that I am trying to fix:

class UserStepper extends Component {

render() {
    const steps_length = this.props.steps.length;
    let handler = this.props.clickHandler;
    // let incompleteStepsArray = []
    // let incompleteID = -1;
    let pendingApproval = this.props.pendingApproval;
    return (
        <div id="stepper-container">
            {this.props.steps.map(function (step, index) {
                if (step.isDone) {
                    if (index !== steps_length - 1) {
                        return (
                            <div key={index} className="completed">
                                <StepperFill
                                    index={index + 1}
                                    click={handler}
                                    steps={step[index]}
                                    class_name="completecontainer"
                                />
                                <CircleCompleted />
                            </div>
                        )
                    }
                    else {
                        return (
                            <div key={index} className="completed">
                                <StepperFill
                                    index={index + 1}
                                    click={handler}
                                    steps={step[index]}
                                    class_name="completecontainer"
                                />
                            </div>
                        )
                    }
                }
                else {
                    {/* incompleteID = incompleteID +1; */}
                    {/* console.log(incompleteStepsArray) */}
                    if (index !== steps_length - 1) {
                        return (
                            <div key={index} className="incompleted">
                                <StepperFill
                                    index={index + 1}
                                    click={handler}
                                    steps={step[index]}
                                    class_name="incompletecontainer"
                                />
                                <CircleIncompleted />
                            </div>
                        )
                    }
                    else {
                        return (
                            <div key={index} className="incompleted">
                                <StepperFill
                                    index={index + 1}
                                    click={handler}
                                    steps={step[index]}
                                    class_name="incompletecontainer"/>
                            </div>
                        )
                    }
                }
            })}
        </div>
    )
}
}

//Functional component to decide wether the stepper should be filled or left 
blank (Complete or Incomplete)
const StepperFill = (props) => {
return (<div onClick={(e) => props.click(e, props.index)} className= 
{props.class_name}>
    <p>Step {props.index}</p>
</div>
)
}

const CircleCompleted = () => {
return (
    <div className='circle_completed'>
        <Icon.Group size='big'>
            <Icon size='small' name='checkmark' color='green' />
        </Icon.Group>
    </div>
)
}

const CircleIncompleted = () => {
return (
    <div className='circle_incompleted'>
    </div>
)
}


export default UserStepper;

Sorry for the long code, no other idea how to show it otherwise that it would make sense as to what is happening. Any suggestions are appreciated.