CODEWITHSUNDEEP
cssreactjsconditional-statements
Sourabh Dubey
Sourabh Dubey

Reputation: 406

How to add class name dynamically in react JS on selected tab

I'm trying to change the background color of selected tab. Problem is that I have to add dynamic class in dynamic Data.

I try to add css class in my code But this css will selected My all Tabs

{emailActivities.map((activity, i) => {
    return (
        <li
        key={i}
        className={this.state.reportView === false ? "active" : null}
        onClick={() => {

            this.setState({ reportView: false }, this.getReportByActivityId(activity.activityId))
        }}
        >
        {activity.activityTitle}

        </li>   

        )
    })
}

This code will selected my all values by defalut I Want to highlighted Selected Tab only. How to do this.

Upvotes: 0

Views: 1262

Answers (3)

Diamond
Diamond

Reputation: 3428

If the number of tabs is fixed, it can be realized by using the key value of map function. Or if there's a unique key in each object such as activityId in your codes, it is easy to do that. In this case, I think reportView state value is useless.

// initialize state
this.state={
    activeTabId: -1, //if you need to select one tab, you can init it by that's activityId
}
...
{emailActivities.map((activity, i) => {
    return (
        <li
        key={i}
        className={activity.activityId === this.state.activeTabId ? "active" : null}
        onClick={() => {
            this.setState({ activeTabId: activity.activityId };
            this.getReportByActivityId(activity.activityId));
        }}
        >
        {activity.activityTitle}

        </li>   

        )
    })
}

You can select the first tab by using key easily, if the number of tabs is fixed.

// initialize state
this.state={
    activeTabId: 0, // Select first tab.
}
...
{emailActivities.map((activity, key) => {
    return (
        <li
        key={key}
        className={key === this.state.activeTabId ? "active" : null}
        onClick={() => {
            this.setState({ activeTabId: key };
            this.getReportByActivityId(activity.activityId));
        }}
        >
        {activity.activityTitle}

        </li>   

        )
    })
}

Better yet, use styled-component rather than changing className. For more details, please check. React Styled Components Tutorial Styled Components Documentation

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20755

Instead of setting reportView: false, you need a state for activeTabName.

  1. Maintain state value
    this.state= {activeTabName:'set first tab name here for by default active'}
  1. Add dynamic class active like this,
    {emailActivities.map((activity, i) => {
        return (
            <li
            key={i}
            className={this.state.activeTabName=== activity.activityTitle? "active" : null}
            onClick={() => {

                this.setState({ activeTabName: activity.activityTitle}, this.getReportByActivityId(activity.activityId))
            }}
            >
            {activity.activityTitle}

            </li>   

            )
        })
    }

Upvotes: 1

Umesh Sehta
Umesh Sehta

Reputation: 10683

You can use activityId to check the selected tab.

{
  emailActivities.map((activity, i) => {
    return (
      <li
        key={i}
        className={this.state.activeTab === activity.activityId ? 'active' : null}
        onClick={() => {
          this.setState(
            { reportView: false, activeTab: activity.activityId },
            this.getReportByActivityId(activity.activityId)
          );
        }}
      >
        {activity.activityTitle}
      </li>
    );
  });
}

Upvotes: 2

Related Questions