onclick not working

authorquiz.js

import React, { Component } from 'react';
import './App.css';
import './bootstrap.min.css'

function Hero()
{
  return( <div className="row">
    <div className ="jumbotron col-10 offset-1">
        <h1> Auther Quiz </h1>
        <p> Select the book written by the auther shown </p>
    </div>
  </div>); 
}

function Turn({author, books, highlight, onAnswerSelected})
{
  function hightligthtobgcolor(highlight){
    const mapping ={
      'none' : '',
      'wrong' : 'red',
      'right' : 'green'
    }
    return mapping[highlight];
  };

  return(<div className="row turn" style={{background:hightligthtobgcolor(highlight)}}> 
  <div className="col-4 offset-1">
   <img src={author.imageUrl} alt="author" />
  </div>
  <div className="col-6">
      {books.map ((title) => <Book title={title} key={title} onClick={onAnswerSelected} /> )}
  </div>
  </div>);
}

function Book({title , onClick})
{
    return(
  <div className="answer" onClick={()=>{onClick(title);}}>
  <h4> {title} </h4>
  </div>
    );

}
function Continue()
{
  return( <div />);
}

function Footer()
{
  return(<div />);
}

class AutherQuiz extends Component {
  
  constructor(props)
  {
    super(props);
    this.state = this.props.data;
    
  }
  
  render() {
        const authorDetail = this.props.data.turnData;
        const highlight = this.props.data.highlight;
        
        
    return (  
      
      <div className="container-fluid">
        {/* <Add a= {4} b={2} c={0} />
        <ClickCounter /> */}
        <Hero />
        <Turn {...this.props.data.turnData} highlight={this.props.highlight} onAnswerSelected={this.onAnswerSelected}/>
        <Continue />
      
        <div></div>
      </div>
    );
  }
}

function NoCheckBox(){

  return <input text="checkpreventdefault" type="checkbox" onclick={(e) => {e.preventDefault();}} />;
}

/* function Add(props)
{
  return(
    <div> {props.a} + {props.b} + {props.c} = {props.a + props.b + props.c} </div>
  );
};

class ClickCounter extends Component{
  constructor(props)
  {
    super(props);
    this.state  =  { clicks : 0 };
  }

  render(){
    return <div onClick={ () => { this.setState({clicks: this.state.clicks + 1}); }} >
            This div has been clicked {this.state.clicks} times.
           </div>;
     
  }
} */
export default AutherQuiz;
''

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AutherQuiz from './AutherQuiz';
import registerServiceWorker from './registerServiceWorker';
import {shuffle,sample} from 'underscore';

const authors = [
    {
        name:"Mark Twain",
        imageUrl: "images/marktwain.jpg",
        books: ['Adventures of Huckelberry Fin','Twilight','Ghost of the White House']
    },
    {
        name:"Thomas Hardy",
        imageUrl: "images/thomashardy.jpg",
        books: ['Mayor of CasterBridge','ABC','DEF']
    },
    {
        name:"J K Rolling",
        imageUrl: "images/jkrolling.jpg",
        books: ['Harry Potter','IFK','CBC']
    },
    {
        name:"Salman Rushdie",
        imageUrl: "images/salmanrushdie.jpg",
        books: ['Midnight children dream ','Twilight','Error of Human Mind']
    },
    {
        name:"Arundhati Roy",
        imageUrl: "images/arundhatiroy.jpg",
        books: ['God of Small Things','No small being','I love nothing']
    },
    

];

function getturndata(authors)
{
    const allBooks = authors.reduce(function(p,c,i){
        return p.concat(c.books);
    },[]);

    
    const fourRandomBooks = shuffle(allBooks).slice(0,4);
    const answer = sample(fourRandomBooks);

    return{
        books: fourRandomBooks,
        author: authors.find((auther) =>
            auther.books.some((title) => title === answer)
        )
    }
}


const state =  {
    turnData: getturndata(authors),
    highlight:''
};

function  onAnswerSelected(answer){
    console.log(answer);
    //const isCorrect = state.turnData.author.books.some((book) => book === answer);
    const isCorrect = true;
    state.highlight = isCorrect ? 'green' : 'red';

    render();
}

function render(){
ReactDOM.render(<AutherQuiz data={state}  onAnswerSelected={onAnswerSelected} />, document.getElementById('root'));
}
render();
registerServiceWorker();