Conditionally setting className based on a state variable in a React functional component

Question

I'm trying to change the appearance of a button based on if that element exists in state. It is a multiple selection selection. So setAnswer is called, which calls addAnswer. I then want to set the className based on whether the element is in state but I'm just not getting it.

{question.values.map(answer => {
        return  <button className="buttons" key={answer} onClick={() => addAnswer(answer)}>
        {answer}</button>
})}

const addAnswer = (answer) => {
        let indexAnswer = answers.indexOf(answer)
        if (indexAnswer > -1) {
            setAnswer((answers) => answers.filter((a) => { 
                return a != answer }))}

        else setAnswer([...answers, answer])
    };

I would like to suggest that perhaps you have an id for your question, it just might make it easier to look them up, select them and do comparisons, — Max Carroll, Jun 25 '20 at 00:02

score 9 · Accepted Answer · answered Jun 24 '20 at 23:26

9

You can conditionally set a class like this

{question.values.map(answer => {
        return (<button 
                 className={answers.indexOf(answer) === -1 ? 'class1' : 'class2'} 
                 key={answer} 
                 onClick={() => addAnswer(answer)}
               >
                 {answer}
              </button> );
})}

answered Jun 24 '20 at 23:26

Siddharth

1,200
8
13

1

Thank you Siddharth! – b0rgBart3 Sep 22 '20 at 15:48

Max Carroll · Answer 2 · 2020-06-24T23:40:42.643

clsx is the perfect candidate for this. You can conditionaly set one or more classNames which get used if a condition is true.

Here's a real working snippet I made which is also available here https://codesandbox.io/s/gracious-sound-2d5fr?file=/src/App.js

import React from "react";
import "./styles.css";
import clsx from "clsx";

import { createUseStyles } from "react-jss";

// Create your Styles. Remember, since React-JSS uses the default preset,
// most plugins are available without further configuration needed.
const useStyles = createUseStyles({
  answer1: { color: "red" },
  answer2: { color: "green" },
  answer3: { color: "yellow" }
});

export default function App() {
  const classes = useStyles();

  const questions = {
    values: [
      { type: 1, value: "aaaa" },
      { type: 2, value: "bbbb" },
      { type: 3, value: "cccc" },
      { type: 1, value: "dddd" },
      { type: 2, value: "eeee" },
      { type: 3, value: "ffff" }
    ]
  };

  return (
    <div className="App">
      {questions.values.map(answer => (
        <p>
          <button
            className={clsx(classes.always, {
              [classes.answer1]: answer.type === 1,
              [classes.answer2]: answer.type === 2,
              [classes.answer3]: answer.type === 3
            })}
          >
            {answer.value}
          </button>
        </p>
      ))}
    </div>
  );
}

for more information on clsx see this example here Understanding usage of clsx in React

Alternatively you can determine the class name via logic and set it in a variable like this

const getClassName = ()=> { 

  switch(answer) {
    case(1): return "class1"
    case(2): return "class2"
    ...
  }
   
}

render(
  /// within the map function
  <   className={getClassName()}  />
)

Conditionally setting className based on a state variable in a React functional component

2 Answers2