Btukfyl

I am new to React and am trying to add an onClick event handle to a list item which is created using map.

Currently, the page renders with the individual items each having their own button. However, when i click on any of the button an error

TypeError: Cannot read property 'AddThisToReadingList' of undefined.

Any help would be appreciated in understanding what is happening. Thanks in advance.

import React, {Component} from 'react';



class ResultsList extends Component{



  constructor(){

    super();

    this.state={

      currentUserEmail: 'brad.ga.co',

      currentBookId: {}

    }

  }



  AddThisToReadingList(index){

    console.log('this');

    //set state

    //axios request to get book info

    //send to node update user

  }



  render(){

    console.log('Rendering');

    return(

      <div>

        <ul>

          <ListedBooks data ={this.props.listFromGoogle}/>

        </ul>

      </div>

    )

  }

};



const ListedBooks= props =>{

  if (props.data === undefined){

    return (<div>Loading....</div>)

  }



  return(

    props.data.map( (book, index)=>{

      return <li key={index}>

        <h4>Title: {book.volumeInfo.title}</h4>

        <div>Author: {book.volumeInfo.authors.map((element, index)=> <p key={index}>{element}</p>)}</div>

        <p>Description: {book.volumeInfo.description}</p>

        <p>Release Date: {book.volumeInfo.publishedDate}</p>

        <img src={book.volumeInfo.imageLinks.smallThumbnail}/>

        <br/>

        <button onClick={()=>this.AddThisToReadingList(index)}>Add to my reading list</button>

      </li>

    })

  )

}









export default ResultsList;

This should do the trick:

In ResultsList:

<ListedBooks

  data={this.props.listFromGoogle}

  AddThisToReadingList={this.AddThisToReadingList.bind(this)}

/>

In ListedBooks:

<button onClick={()=>props.AddThisToReadingList(index)}>

  Add to my reading list

</button>

ListedBooks knows nothing about this in ResultsList. this is, in fact, undefined in ListedBooks. You need to pass the method to ListedBooks as a prop in order to access it there.

Add additional data to button like

<button id="additem" data-index={index}></button>

Then you can add listener with native javascript

render() {

  const button = document.getElementById('additem');

  button.addEventListener('click', () => {

      this.AddThisToReadingList(button.dataset.index);

  })



  return (

      props.data.map( (book, index)=>{

        return <li key={index}>

                 <h4>Title: {book.volumeInfo.title}</h4>

                 <div>Author: {book.volumeInfo.authors.map((element, index)=> <p key={index}>{element}</p>)}</div>

                 <p>Description: {book.volumeInfo.description}</p>

                 <p>Release Date: {book.volumeInfo.publishedDate}</p>

                 <img src={book.volumeInfo.imageLinks.smallThumbnail}/>

                 <br/>

                 <button data-index={index}>Add to my reading list</button>

               </li>

        })

    )

 }