Change Color of selected element only

Question

I am developing a Quiz like App Where I have a question and set of answers. My aim is to change the background color of answer element based on correct or wrong answer. I tried the below technique but it is changing color of all my answer elements. import React from 'react';

function Book(props){
    let onClick = props.onClick;
    return(
        <div className="answer" 
        style={{backgroundColor:props.highlight}} 
        onClick={()=>{onClick(props.title);}}
        >
            <h1>{props.title}</h1>
        </div>
    )
}
export default Book;

This is component where i am consuming the book component

import React from 'react';
import AuthorQuiz from '../AuthorQuiz';
import Book from './book';

function Turn(props){
    let highlight = props.highlight;
    console.log(props);
    function highlightToBgColor(highlight){
        const mapping = {
            none:'',
            'correct':'green',
            'wrong':'red'
        }
        return mapping[highlight];

    }
    return(
        <div className="row turn">
            <div className="col-4 offset-1">
                <img src={props.author.imageUrl} className="auhtorimage" alt="Auhtor"/>
            </div>
            <div className="col-6">
                {props.books.map((title) => <Book title={title} key={title} highlight={highlightToBgColor(highlight)} onClick={props.onAnswerSelected}/>)}
            </div>
        </div>
    )
}
export default Turn;

The below is output

Could anyone please how i can i achieve it.

Answer 1

hi @Zahid Hussain please check the live demo

Turn.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Book from "./App";

function Turn(props) {
  const [selectedAnswer, setAnswer] = useState();
  const books = [
    { id: 1, title: "BOOK1" },
    { id: 2, title: "BOOK2" },
    { id: 3, title: "BOOK3" },
    { id: 4, title: "BOOK4" },
    { id: 5, title: "BOOK5" }
  ];

  return (
    <div className="row turn">
      <div className="col-6">
        {books.map(book => (
          <Book
            book={book}
            onClick={selectedAnswer => setAnswer(selectedAnswer)}
            selectedChoice={selectedAnswer}
          />
        ))}
      </div>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Turn />, rootElement);

book.js

import React from "react";

function Book(props) {
  const { onClick, selectedChoice, book } = props;
  return (
    <div
      style={{
        color: selectedChoice && selectedChoice.id === book.id ? "green" : ""
      }}
      onClick={() => {
        onClick(book);
      }}
    >
      <h1>{book.title}</h1>
    </div>
  );
}
export default Book;

Answer 2

This is how you can change selected list item color.

Sample app

class App extends React.Component {
  state = {
    arr: [
      { id: 1, name: "profile", title: "Profile" },
      { id: 2, name: "recruit", title: "Recruitment" },
      { id: 3, name: "arts", title: "Arts" },
      { id: 4, name: "talents", title: "Talents" },
      { id: 5, name: "affection", title: "Affection" }
    ],
    selected: ""
  };
  changeColor = id => {
    this.setState ({ selected: id });
  };
  render() {
    const { selected, arr } = this.state;
    console.log(selected)
    return (
      <div>
        <h2>Click to items</h2>
        <ul>
          {arr.map(({ name, id, title }) => (
            <li key={id}>
              <h3
                style={{
                  color: selected === id ? "red" : ""
                }}
                onClick={() => this.changeColor(id)}
                name={name}
              >
                {title}
              </h3>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

working example live demo