How to set className to div in ReactJS using functional component

Question

I have following code:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
    const [border, setBorder] = useState(false);
    return (
        <div className="App">
            <div className="SectionTitleItem">Claimers</div>
            <div className="SectionTitleItem">Resources</div>
        </div>
    );
}

CodeSandbox

How can I set the border-bottom only for the active item?

Take a look at [react router](https://stackoverflow.com/questions/41131450/active-link-with-react-router) — 0stone0, Oct 22 '20 at 12:19
if item clicked then it was active one. Is there other way, I don't want to usereact router — Vardan Hambardzumyan, Oct 22 '20 at 12:25

michael · Accepted Answer · 2020-10-22T12:30:28.107

App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [active, setActive] = useState(true);
  return (
    <div className="App">
      <div onClick={() => setActive(true)} className={`SectionTitleItem${active ? " active" : ""}`}>Claimers</div>
      <div onClick={() => setActive(false)} className={`SectionTitleItem${!active ? " active" : ""}`}>Resources</div>
    </div>
  );
}

styles.css

.App {
  font-size: 18px;
  margin: 40px 0 32px 0;
  display: flex;
}
.SectionTitleItem {
  margin-left: 50px;
}

.SectionTitleItem.active {
  border-bottom: 2px solid red;
}

Thanks, but It works only for first item.... when I click on second item nothing was happen — Vardan Hambardzumyan, Oct 22 '20 at 12:28

score 0 · Answer 2 · answered Oct 22 '20 at 12:27

Perhaps something like

export default function App() {
  const [active, setActive] = useState(null);

  const getItemClassName = (name) => {
    if (name === active) {
      return "SectionTitleItem active";
    }
    return "SectionTitleItem";
  };
  
  return (
    <div className="App">
      <div
        onClick={() => setActive("claimers")}
        className={getItemClassName("claimers")}
      >
        Claimers
      </div>
      <div
        onClick={() => setActive("resources")}
        className={getItemClassName("resources")}
      >
        Resources
      </div>
    </div>
  );
}

.App {
  font-size: 18px;
  margin: 40px 0 32px 0;
  display: flex;
}

.SectionTitleItem {
  margin-left: 50px;
}

.SectionTitleItem.active {
  border-bottom: 2px solid red;
}

How to set className to div in ReactJS using functional component

2 Answers2