title: Laravel + React: Handling API Data
body: <p>I'm new to react and laravel and I am trying to boost my skills during this god awful lockdown. I'm following tons of tutorials but I keep finding that they are either incomplete, have very bad english or not indepth enough and skip over things too quickly.</p>
  <p>I don't mean to sound ungrateful, I love the fact people are sharing this information I am just really struggling to get to grips.</p>
  <p>I am hoping someone can help me understand how to make all these components work together. I'll explain my project:</p>
  <h2>My Project</h2>
  <ul>
  <li>Laravel</li>
  <li>React</li>
  <li>JS Charts</li>
  <li>Bootstrap</li>
  </ul>
  <p>I am creating a very basic crypto currency dashboard. That will display a chart and a table of data.</p>
  <p>Here is a wireframe:</p>
  <p><a href="https://i.stack.imgur.com/rh47N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rh47N.png" alt="enter image description here" /></a></p>
  <p>I have created the following componenets:</p>
  <ul>
  <li>sidebar</li>
  <li>charts</li>
  <li>table</li>
  </ul>
  <p>These are referenced in the <code>welcome.blade.php</code> file:</p>
  <pre><code>return (
          &lt;div className=&quot;example&quot;&gt;
              &lt;SideBar /&gt;
              &lt;Chart /&gt;
              &lt;Table /&gt;
          &lt;/div&gt;
      );
  </code></pre>
  <p>I also created a Laraval API that links to my sqlite database. The sidebar displays a list of the crypto currencies I have in the database.</p>
  <p><em>In the sidebar:</em></p>
  <p>I am calling the endpoint of <code>/crypto</code> I get a returned JSON. This contains a list of all the cryptos in my database (only top 10 at the moment).</p>
  <pre><code>componentDidMount() {
          
          fetch('/api/crypto')
              .then(response =&gt; {
                  return response.json();
              })
              .then(crypto =&gt; {
                  this.setState({ crypto });
              });
        }
  </code></pre>
  <p>and then I am adding it to the <code>state</code>:</p>
  <pre><code>constructor() {
          super();
  
          this.state = {
              crypto: [],
          };
      }
  </code></pre>
  <p>Then I am doing rendering that into a list item.</p>
  <p>I am doing the same from the <code>chart</code> and the <code>table</code> however, they only get a specific crypto from the endpoint <code>/api/crypto?coin=btc</code>.</p>
  <p>All this works fine, the data is shown in the table, the charts show correctly.</p>
  <h2>What I want to do.</h2>
  <ol>
  <li>I want to be able to click any of the crypto names in the sidebar, and have the chart and table data update with that specific data.</li>
  <li>I want to be able to reduce the amount of API calls so that if I do not have to request the database 10 times</li>
  </ol>
  <p>I would be extremely grateful for details answers, links and references to videos - tutorials etc...</p>
  <p>Thank you</p>