Reputation: 25

How to add classname "active" in ReactJS

The current code has not succeeded in adding the active classname, what is the solution if I want to add the active classname in this section:

<li onClick = (() => onChangeStatus ({status: 'on-hold'})} className = {appState == = {status: 'on-hold'}? "tool-select-item active": "tool-select-item"}> <span className = "label-status gray"> On Hold </span> </li>

for example.

I have code :

import React, { useState }  from 'react';
const List = (props) => {
    const { data} = props;
    const [appState, setAppState]  = useState({
        status:'Choose'
        });

    const onChangeStatus = status => {
        setAppState(status); // remove the curly braces
    };

  if (!data || data.length === 0) return <p>No data order, sorry</p>;
  return (
    <div className="main-dash">
        <div className="status-toolbar">
        <div className="toolicon-wrapper status">
            <button id="#show" className="toolicon status"><span>{appState.status}</span></button>
            <div className="tool-inner">
                <div className="tool-wrapper">
                    <div className="tool-heading">Status</div>
                    <ul className="tool-select">
                        <li onClick={() => onChangeStatus({ status: 'on-hold'})} className={appState === { status: 'on-hold' } ? "tool-select-item active" : "tool-select-item"}><span className="label-status grey">On Hold</span></li>
                        <li onClick={() => onChangeStatus({ status: 'pending'})} className={appState === { status: 'pending' } ? "tool-select-item active" : "tool-select-item"}><span className="label-status orange">Pending</span></li>
                        <li onClick={() => onChangeStatus({ status: 'processing'})} className={appState === { status: 'processing'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status green">Processing</span></li>
                        <li onClick={() => onChangeStatus({ status: 'packing'})} className={appState === { status: 'packing'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status green">Packing</span></li>
                        <li onClick={() => onChangeStatus({ status: 'on-delivery'})} className={appState === { status: 'on-delivery'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status green">On Delivery</span></li>
                        <li onClick={() => onChangeStatus({ status: 'completed'})} className={appState === { status: 'completed'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status blue">Completed</span></li>
                        <li onClick={() => onChangeStatus({ status: 'late'})} className={appState === { status: 'late'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status red">Cut Off</span></li>
                        <li onClick={() => onChangeStatus({ status: 'cancelled'})} className={appState === { status: 'cancelled'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status red">Cancelled</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
  );
}
export default List;

Upvotes: 1

Answers (3)

buzatto

Reputation: 10382

the issue is you are comparing objects, the comparison is reference based not about their content. This way two objects with same values won't match because they have different references.

The proper way to solve this issue would be comparing with appState.state value:

className = {appState.state === 'on-hold'? "tool-select-item active": "tool-select-item"

fwiw, your state doesn't need to be an object, since it contains only one value. Also you onChangeStatus is unnecessary, it does the same as setAppState. Likewise you could abstract your comparison logic to a function if you like.

as a suggestion you could refactor as:

import React, { useState }  from 'react';
const List = (props) => {
    const { data } = props;
    const [appState, setAppState]  = useState('Choose');

    const handleClass = status => appState === status ? "tool-select-item active" : "tool-select-item";

  if (!data || data.length === 0) return <p>No data order, sorry</p>;
  return (
    <div className="main-dash">
        <div className="status-toolbar">
        <div className="toolicon-wrapper status">
            <button id="#show" className="toolicon status"><span>{appState}</span></button>
            <div className="tool-inner">
                <div className="tool-wrapper">
                    <div className="tool-heading">Status</div>
                    <ul className="tool-select">
                        <li onClick={() => setAppState('on-hold')} className={handleClass('on-hold')}><span className="label-status grey">On Hold</span></li>
                        <li onClick={() => setAppState('pending')} className={handleClass('pending')}><span className="label-status orange">Pending</span></li>
                        <li onClick={() => setAppState('processing')} className={handleClass('processing')}><span className="label-status green">Processing</span></li>
                        <li onClick={() => setAppState('packing')} className={handleClass('packing')}><span className="label-status green">Packing</span></li>
                        <li onClick={() => setAppState('on-delivery')} className={handleClass('on-delivery')}><span className="label-status green">On Delivery</span></li>
                        <li onClick={() => setAppState('completed')} className={handleClass('completed')}><span className="label-status blue">Completed</span></li>
                        <li onClick={() => setAppState('late')} className={handleClass('late')}><span className="label-status red">Cut Off</span></li>
                        <li onClick={() => setAppState('cancelled')} className={handleClass('cancelled')}><span className="label-status red">Cancelled</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
  );
}
export default List;

Upvotes: 0