Question.jsx

import React from "react";
import { Card, ListGroup } from "react-bootstrap";

function Question(props) {
  let { question, checkOption } = props;
  return (
    <Card>
      <Card.Body>
        <Card.Title>{question.name}</Card.Title>
        <ListGroup>
          {question.options.map((option) => {
            console.log(option._id, question.selectedOption);
            return (
              <ListGroup.Item
                disabled={question.selectedOption ? true : null}
                onClick={() => checkOption(question._id, option._id)}
                style={
                  question.selectedOption === question.trueOption &&
                  option._id === question.selectedOption
                    ? { border: "2px solid #38bb38", borderRadius: ".3rem" }
                    : question.selectedOption !== question.trueOption &&
                      option._id === question.selectedOption
                    ? { border: "2px solid #e24646", borderRadius: ".3rem" }
                    : null
                }
              >
                <div className="number">{option._id}</div>
                <div>{option.name}</div>
              </ListGroup.Item>
            );
          })}
        </ListGroup>
      </Card.Body>
    </Card>
  );
}
export default Question;