So I'm learning React and got stuck with fetching data from two different APIs and displaying the data into the same table. I can display data from the first API where I get the number and name but when I try to display data from the second API to get the genre, it won't work anymore. I'm not even sure can I do it this way, but hopefully someone can help.

```
class Stops extends React.Component {
  constructor () {
    super()
    this.state = {
      books: [],
      authors: []
    }
  }
  componentDidMount () {
    fetch('/url1')
      .then((res) => {
        res.json()
          .then(data => this.setState({ books: data }))
      })
    fetch('/url2')
      .then((response) => {
        response.json()
          .then(authorData => this.setState({authors: authorData }))
      })
  }
  Displayauthors (authors) {
    return authors.map((author) => (
      <div key={author.authorId}>
         {author.genre}
      </div>
    ))
  }
  render () {
    const books = this.state.books
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>number</th>
              <th>name</th>
              <th>Genre</th>
              <th>Download book</th>
            </tr>
          </thead>
          <tbody>
            {
             books.map((book) => (
                <tr key={book.id}>
                  <td>{book.number}</td>
                  <td>{book.name}</td>
                  <td>{this.displayAuthors(this.state.authors)}</td>
                  <td><button type="button">Download</button></td>
               </tr>
             ))
            }
          </tbody>
        </table>
      </div>
    )
  }
}

```