How to check multiple conditions with ternary operator in react-CodePudding

I am trying to change style based on route with the help of react router. So I want the description route to be orange color when user is in description route , white color when user is in teacher-add-course route & green when at others route but my last condition is not rendering when I am at others route. I have tries the conditions with the ternary operator. Can anyone help?

I have tried writing the condition with the ternary operator & it worked when I am at the teachers-add-course route & description route but when I am in other routes like requirement the condition is not applying.

import React from 'react';
import { FaBookOpen } from 'react-icons/fa';
import { Link, useLocation } from 'react-router-dom';
import '../../asset/css/Teachers-overview/TeachersDashboardSidebar.css'

const TeachersDashboardSidebar = () => {
    let location = useLocation()
    console.log(location.pathname);
    return (
        <div className='sidebar-container'>
            <div className='sidebar-content-wrapper'>
                <div className='overview-wrapper'>
                    <div className='d-flex flex-column align-items-center'>
                            <div className= {`${location.pathname=== '/teacher-add-course'? 'progress-book-icon bg-orange':'progress-book-icon bg-complete'}`}>
                                <FaBookOpen className="text-white " />
                            </div>
                        <div className={`${location.pathname==='/teacher-add-course'? 'candle-basic':'candle-success'}`}></div>
                    </div>
                    <Link to="/teacher-add-course"><span className="text-semilight font-weight-bold mt-2 ml-3">Overview</span></Link>
                </div>
                <div className='bold d-flex'>
                    <div className='d-flex flex-column align-items-center'>
                            <div className={`${location.pathname=== '/teacher-add-course/description'?'bg-orange':'teacher-add-course'?'progress-book-icon':'bg-complete'} `}>
                                <FaBookOpen className="text-white " />
                            </div>
                        <div className={`${location.pathname==='/teacher-add-course/description'? 'candle-basic':'candle-success'}`}></div>
                    </div>
                    <Link to="/teacher-add-course/description"><span className="text-semilight font-weight-bold mt-2 ml-3">Description</span></Link>
                </div>
                <div className='text-warning bold d-flex'>
                    <div className='d-flex flex-column align-items-center'>
                            <div className={`${location.pathname=== '/teacher-add-course/requirements'? 'progress-book-icon bg-orange': '/teacher-add-course/gallery'? 'progress-book-icon bg-complete':'progress-book-icon'}`}>
                                <FaBookOpen className="text-white " />
                            </div>
                        <div className={`${location.pathname==='/teacher-add-course/requirements'? 'candle-basic':'candle-success'}`}></div>
                    </div>
                    <Link to="/teacher-add-course/requirements"><span className="text-semilight font-weight-bold mt-2 ml-3">Requirements</span></Link>
                </div>
            </div>
        </div>
    );
};

export default TeachersDashboardSidebar;

CodePudding user response：

You need to write out the entire comparison for each branch.

<div className={`${location.pathname === '/teacher-add-course/requirements'? 'progress-book-icon bg-orange': location.pathname === '/teacher-add-course/gallery'? 'progress-book-icon bg-complete':'progress-book-icon'}`}>

Note that the template literal is not needed here; you can directly pass the result of the conditional operator to the className.