title: Fetch GET request with Reactjs - how do i implement a reusable component within my request to render my data?
body: <p>TLDR - You should not implement/call your reusable component within your data fetching request. The correct way to do so is having a container component that is responsible for fetching the data, storing it in <code>state</code>, and passing it down to a presentational component that is responsible for rendering the data as UI. (example below)</p>
  
  <hr>
  
  <p>Initially what I was trying to do (I assumed components are converted to HTML and can be created as string - <strong>BAD PRACTICE</strong>):</p>
  
  <pre><code>fetch('http://localhost:8000/api/Books')
          .then(response =&gt; {
              if (!response.ok) {
                  throw Error('Network request failed.')
              }
              return response;
          })
          .then(data =&gt; data.json())
          .then(data =&gt; {
              let output = ''
              for (let book of data) {
                  output += (
                      &lt;Book id={book._id}
                            title={book.title}
                            author={book.author}
                            genre={book.genre}
                            read={book.read} /&gt;
                      );
              }
              console.log('parsed json', data);
              document.getElementById('database').innerHTML = output;
          }, (ex) =&gt; {
              this.setState({
                  requestError : true
              });
              console.log('parsing failed', ex)
          })
  </code></pre>
  
  <p><strong>My question was</strong>:<br>
  <em>How do i make this work? how do I Implement my Book component inside the GET request to render a reusable Book for every object in the database</em>?</p>
  
  <p><strong>My solution</strong><br>
  having <code>&lt;BooksContainer /&gt;</code> as my container component books data is stored in state and is iterated using <code>.map</code> to render each book object as a <code>&lt;Book /&gt;</code> component - our presentational function.</p>
  
  <pre><code>    //BooksContainer.js - responsible for data fetching and storing
  class BooksContainer extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              books: [];
          };
      }
      componentDidMount () {
          fetch('http://localhost:8000/api/Books')
              .then(response =&gt; {
                  if (!response.ok) {
                      throw Error('Network request failed.')
                  }
                  return response;
              })
              .then(data =&gt; data.json())
              .then(data =&gt; {
                  this.setState({
                      books: data
                  });
                  console.log('parsed json', data);            
              }, (ex) =&gt; {
                  this.setState({
                      requestError : true
                  });
                  console.log('parsing failed', ex)
              })
      }   
      render () {
          return (
              &lt;div className="books-container"&gt;
                  &lt;ul className="books-list"&gt;
                      {this.state.books.map(book =&gt; &lt;Book {...book} /&gt;}
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
      }
  
      //Book.js - responsible for presenting each book's data
      const Book = (props) =&gt; (
          &lt;li&gt;
              &lt;span className="title"&gt;{this.props.title}&lt;/span&gt;
              &lt;span className="author"&gt;Author: {this.props.author&lt;/span&gt;
              &lt;span className="genre"&gt;Genre: {this.props.genre}&lt;/span&gt;
              &lt;span className="read"&gt;Read: {this.props.read ? "Yes" : "No"}&lt;/span&gt;
          &lt;/li&gt;
      )
  </code></pre>