title: TypeError: Cannot read property 'title' of undefined in React
body: <p>I have an object which is passed ti the n=modal component in the form </p>
  
  <pre><code>data =[
    {
      _id: "5ba241b4efa8da2f1464ca81", 
      title: "Zero To One", 
      author: "Peter Thiel", 
      isbn: 1279031943, 
      __v: 0
    }
  ]
  </code></pre>
  
  <p>I want to access the title key on the data but when I do I get a <strong>TypeError.</strong> 
  I tried converting it to a string using <code>JSON.stringigy()</code> but I still got the same error. 
  I am trying to access the data within the modal so when the modal opens, the value of the inputs in the modal is set with the data from the Table so I can easily edit them</p>
  
  <p>When I <code>console.log(data[0])</code> I get the items in the object but as soon as I log <code>console.log(data[0].title)</code> the <strong>TypeError</strong> appears again.</p>
  
  <pre><code>import React, { Component } from 'react';
  import './Update.css';
  import Search from '../Search/Search';
  // import Modal from './Modal/Modal';
  
  const Table = ({ data, openBookDetails }) =&gt; (
      &lt;table class="table table-hover"&gt;
          &lt;thead&gt;
              &lt;tr class="table-primary"&gt;
                  &lt;th scope="col"&gt;Title&lt;/th&gt;
                  &lt;th scope="col"&gt;Author&lt;/th&gt;
                  &lt;th scope="col"&gt;ISBN&lt;/th&gt;
                  &lt;th scope="col"&gt;No. Of Copies&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {data.map(row =&gt; 
                  &lt;TableRow key={row.id} row={row} openBookDetails={openBookDetails}/&gt;
              )}
  
          &lt;/tbody&gt;
      &lt;/table&gt;
  )
  
  const TableRow = ({ row, openBookDetails }) =&gt; (
       &lt;tr class="table-light" onClick={openBookDetails}&gt;
          &lt;th scope="row" &gt;{row.title}&lt;/th&gt;
          &lt;td &gt;{row.author}&lt;/td&gt;
          &lt;td &gt;{row.isbn}&lt;/td&gt;
          &lt;td &gt;24&lt;/td&gt;
      &lt;/tr&gt;
  )
  
  const Modal = ({ closeBookDetails, isBookDetailsOpen, children, data }) =&gt; {
      const showHideClassName = isBookDetailsOpen ? 'modal display-block' : 'modal display-none';
  
      console.log(data[0].title);
  
      return (
        &lt;div className={showHideClassName}&gt;
  
                  &lt;div class="modal-dialog" role="document"&gt;
                      &lt;div class="modal-content"&gt;
                          &lt;div class="modal-header"&gt;
                              &lt;h5 class="modal-title"&gt;Update Book&lt;/h5&gt;
                              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label htmlFor="title"&gt;Title&lt;/label&gt;
                                  &lt;input type="text" class="form-control" id="title" aria-describedby="title" placeholder="Enter title of book" value={data}/&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;label htmlFor="author"&gt;Author&lt;/label&gt;
                                  &lt;input type="text" class="form-control" id="author" aria-describedby="author" placeholder="Enter author name" value={data}/&gt;                        
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;label htmlFor="isbn"&gt;ISBN&lt;/label&gt;
                                  &lt;input type="number" min="0" class="form-control" id="isbn" aria-describedby="isbn" placeholder="Enter ISBN number" value={data.title}/&gt;                               
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="copies"&gt;Number of Copies&lt;/label&gt;
                                  &lt;input type="number" min="0" class="form-control" id="copies" aria-describedby="copies" placeholder="Enter the number of copies" value={data.title}/&gt;                  
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                              &lt;button type="button" class="btn btn-secondary" data-dismiss="modal" onClick={closeBookDetails}&gt;Close&lt;/button&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
            {children}
        &lt;/div&gt;
      );
    };
  
  class Update extends Component{
      constructor(props) {
          super(props);
  
          this.state = {
              value: '',
              suggestions: [],
              setOfAllBooks: [],
              searchedBooks: [],
              isBookDetailsOpen: false,
          };
  
          this.setTableData = this.setTableData.bind(this);
          this.openBookDetails = this.openBookDetails.bind(this);
          this.closeBookDetails = this.closeBookDetails.bind(this);
      }
  
      setTableData(searchedBook){
          this.setState({searchedBooks: searchedBook})
  
          console.log(this.state.searchedBooks)
      }
  
      openBookDetails(){
          console.log('openBookDetails')
          this.setState({ isBookDetailsOpen: true})
      }
  
      closeBookDetails(){
          this.setState({ isBookDetailsOpen: false})
      }
  
      render(){
          return(
              &lt;div&gt;            
                  &lt;Search state={this.state} setTableData={this.setTableData} /&gt;
                  &lt;Table data={this.state.searchedBooks} openBookDetails={this.openBookDetails}/&gt;
                  &lt;Modal data={this.state.searchedBooks} isBookDetailsOpen={this.state.isBookDetailsOpen} closeBookDetails={this.closeBookDetails} /&gt;
                  {/* &lt;Modal /&gt; */}
              &lt;/div&gt;
          )
      }
  }
  
  export default Update;
  </code></pre>