How to alternate the display of a single li element in React?

Question

How to alternate the display of a single li element in React?

I am looking to swap the colors of the active element in my project. Currently, both elements change style when clicked. How can I resolve this? Thanks!

function Language() {
  
  const [isStyled, setIsStyled] = useState(false);
  
  const toggleStyle = () => {   
    setIsStyled(!isStyled);
  };

  return (
    <>
      <ul className="lang">
        {languages.map(({ code, name, country_code }) => (
          <li key={country_code}>
            <h4 onClick={() => {i18next.changeLanguage(code); toggleStyle()}} className={isStyled ? "cont" : "cont2"}>{name}</h4>
          </li>
        ))}
      </ul>
    </>
  );
}

javascript css reactjs

Answer 1

Answer №1

Consider using the index of the active element instead of a boolean as state in your code:

function Language() { 
  const [active, setActive] = useState(-1); // -1 indicates no active element

  const changeStyle = (index) => {   
    setStyle(index);
  };

  return (
    <>
      <ul className="lang">
        {languages.map(({ code, name, country_code }, i) => ( // use 'i' as index
          <li key={country_code}>
            <h4 onClick={() => {i18next.changeLanguage(code); changeStyle(i)}} className={active === i ? "cont" : "cont2"}>{name}</h4>
          </li>
        ))}
      </ul>
    </>
  );
}

You can then compare if the index of the current li matches the active index.

Answer 2

Consider using the index of the active element instead of a boolean as state in your code:

function Language() { 
  const [active, setActive] = useState(-1); // -1 indicates no active element

  const changeStyle = (index) => {   
    setStyle(index);
  };

  return (
    <>
      <ul className="lang">
        {languages.map(({ code, name, country_code }, i) => ( // use 'i' as index
          <li key={country_code}>
            <h4 onClick={() => {i18next.changeLanguage(code); changeStyle(i)}} className={active === i ? "cont" : "cont2"}>{name}</h4>
          </li>
        ))}
      </ul>
    </>
  );
}

You can then compare if the index of the current li matches the active index.

Answer 3

Answer №2

To determine the state value, you can assign the code of the active list item and compare it with either the code value of the list item or any other unique identifier.

function Language() {
  const [active, setActive] = useState('');      
  const changeStyle = (code) => setActive(code)


  return (
    <>
      <ul className="lang">
        {languages.map(({ code, name, country_code }) => (
          <li key={country_code}>
            <h4 
                onClick={()=>{
                  i18next.changeLanguage(code);
                  changeStyle(code)
                }} 
                className={active===code && "active" }>
                  {name}
            </h4>
          </li>
        ))}
      </ul>
    </>
  );
}

Answer 4

To determine the state value, you can assign the code of the active list item and compare it with either the code value of the list item or any other unique identifier.

function Language() {
  const [active, setActive] = useState('');      
  const changeStyle = (code) => setActive(code)


  return (
    <>
      <ul className="lang">
        {languages.map(({ code, name, country_code }) => (
          <li key={country_code}>
            <h4 
                onClick={()=>{
                  i18next.changeLanguage(code);
                  changeStyle(code)
                }} 
                className={active===code && "active" }>
                  {name}
            </h4>
          </li>
        ))}
      </ul>
    </>
  );
}

How to alternate the display of a single li element in React?

Answer №1

Answer №2

Similar questions

Troubleshooting inactive CSS hover animation

Update the array state based on the selection of checkboxes and user input in real-time

Adding a certain number of days to a date within an existing ng-module in AngularJS

Transferring information between Vue.js components via data emissions

The ƒ character doesn't seem to be a match for the JavaScript regex

What is the best way to implement transition effects while toggling between light mode and dark in tailwind 2.0?

Place a cookie on the alternate language domain

Creating a set of labels using values derived from a collection of objects

Dynamic tag names can be utilized with ref in TypeScript

Adjust the CSS for the "a" tag's "title" attribute

Utilize JQuery's .load() function to transmit JSON data to your Flask server

The absence of a defined window object is causing issues in the integration of NextJS with

Issue with scrollIntoView in devices with a width lower than 1200px

Encountering an error code of 500 when executing the createIndex function in Pouch

Issue with Heroku deployment: SCRIPT5007 error - Property 'apply' is undefined or null. Detected in NodeJs and React application

Error encountered: AXIOS request failed due to XSRF-TOKEN Mismatch

Developing a JSONP functionality

how to protect your javascript and php code

Having trouble getting an AjaxBeginForm to function properly within a JQuery script on a PartialView

Can you explain the purpose of $winstonLoggerConfig<T>() and $winstonLogger<T>() in winston v3?