Set different styles in a list - html

Question

I'm creating a FAQ, I have an array with the questions and answers, I managed to render this array on my page, but I want to edit different styles for the questions and answers, how can I do this? here is my code:
My FAQ list:
const FAQ = ({ props }) => {
const history = useHistory();
const classes = useStyles();
const dispatch = useDispatch();
const { user, userlist, isLoading } = useSelector((state) => state.Authentication);
const [expanded, setExpanded] = React.useState(false);
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
const WellbeingData = [
{
index: 1,
question: "Lorem ipsum dolor sit amet?",
answer:
"Tenetur ullam rerum ad iusto possimus sequi mollitia dolore sunt quam praesentium. Tenetur ullam rerum ad iusto possimus sequi mollitia dolore sunt quam praesentium.Tenetur ullam rerum ad iusto possimus sequi mollitia dolore sunt quam praesentium.",
},
{
index: 2,
question: "Dignissimos sequi architecto?",
answer:
"Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque. Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque.",
},
{
index: 3,
question: "Voluptas praesentium facere?",
answer:
"Blanditiis aliquid adipisci quisquam reiciendis voluptates itaque.",
},
];
and here is my last failed try to render it correctly
const questionList = WellbeingData.map((data) => <div style={{fontSize: 18, fontWeight: 'bold'}}><li key={data.index}>{data.question}</li></div>)
const answerList = WellbeingData.map((data) => <div style={{fontSize: 16}}><li key={data.index}>{data.answer}</li></div>)
{questionList}
<br/>
{answerList}
What could I do to solve this...

Answer 1

If the styles are limited, lets say "Answered", "New", "Deleted", you can have one css class for each style (e.g .deletedAnswer .deletedQuestion) and add a new element to your object like type: something, then dynamically choose a class based on the value of type. the easiest way is to set the value to the class name:
{
index: 3,
question: "Voluptas praesentium facere?",
answer:
"Blanditiis aliquid adipisci quisquam reiciendis voluptates itaque.",
class: "deletedAnswer"
}
And then just putting the value of array[index].class to your element's class.