How to Conditionally Add styles in react?

Question

Im building a simple question and answer quiz in React. Id like the box-shadow to turn either red or green on a correct/incorrect answer on clicking the option. Its grey as default.

in Regular Js I would do this, or add a class but neither will work in React.

Any help appreciated

function handleClick(event) {
        const card = document.querySelector('card')
        if (event.target.innerText == flashcard.answer){
            card.style.boxShadow = ' 0 0 5px 2px rgba(1, 156, 48 , 0.3)'
        } else {
            card.style.boxShadow = ' 0 0 5px 2px rgba(255, 0,  0, 0.3)'
        }

Answer 1

With React you should be able to use hooks in order to change the component state

i.e.

import {useState} from "react";


export default function ChangeColorComponent() {
    const [colorState, changeColor] = useState("gray");

    function changeColorByEvent(event) {
       // TODO: Enter your logic
       changeColor(/*your state*/)
   }

   return <div style={{color: colorState}} onClick={changeColorByEvent}>SomeText</div>
}

In your main program you should write this You need to use it in some other component, like your App

import ChangeColorComponent from "./comp"
<ChangeColorComponent/>

I guess there are many ways to do it, maybe even simpler like suggested here. Though I think this is one of the better ways to implement it in React nowdays

Edit: I edited my code because I wrote it without react app and couldn't test it up until now/

Answer 2

I have created a simple app to show you how it can be achieved, I hope this will give you a general idea. You can't use it as is cause I guess the shape of your question answer object may be different than the one I used.

Working App: StackBlitz

import React, { useState, useEffect } from "react";
import "./style.css";
import { questions } from "./questions";
export default function App() {
  const [selectedAns, setSelectedAns] = useState("");
  const [index, setIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [shadow, setShadow] = useState(null);

  useEffect(() => {
    console.log(selectedAns);
  }, [selectedAns]);
  return (
    <div>
      <h3>{questions[index]?.question}</h3>
      <div
        className="ans"
        onClick={() => {
          setSelectedAns(questions[index]?.correct_answer);
        }}
        style={{
          boxShadow:
            selectedAns == questions[index]?.correct_answer
              ? selectedAns == questions[index]?.correct_answer
                ? "0 0 5px 2px rgba(1, 156, 48 , 0.3)"
                : "0 0 5px 2px rgba(255, 0,  0, 0.3)"
              : null
        }}
      >
        {questions[index]?.correct_answer}
      </div>
      {questions[index]?.incorrect_answers?.map(answer => (
        <div
          className="ans"
          onClick={() => {
            setSelectedAns(answer);
            console.log(answer);
          }}
          style={{
            boxShadow:
              selectedAns !== answer
                ? null
                : selectedAns == questions[index]?.correct_answer
                ? "0 0 5px 2px rgba(1, 156, 48 , 0.3)"
                : "0 0 5px 2px rgba(255, 0,  0, 0.3)"
          }}
        >
          {answer}
        </div>
      ))}
      <button
        className="ans"
        onClick={() => {
          setIndex(index + 1);
          if (questions[index]?.correct_answer == selectedAns) {
            setScore(score + 1);
          }
          setSelectedAns("");
        }}
      >
        NEXT
      </button>
      <h3>YOUR SCORE: {score}</h3>
    </div>
  );
}