Laravel + React: Handling API Data

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.

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.

I am hoping someone can help me understand how to make all these components work together. I’ll explain my project:

My Project

• Laravel
• React
• JS Charts
• Bootstrap

I am creating a very basic crypto currency dashboard. That will display a chart and a table of data.

Here is a wireframe:

I have created the following componenets:

• sidebar
• charts
• table

These are referenced in the welcome.blade.php file:

return (
        <div className="example">
            <SideBar />
            <Chart />
            <Table />
        </div>
    );

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.

In the sidebar:

I am calling the endpoint of /crypto I get a returned JSON. This contains a list of all the cryptos in my database (only top 10 at the moment).

componentDidMount() {
        
        fetch('/api/crypto')
            .then(response => {
                return response.json();
            })
            .then(crypto => {
                this.setState({ crypto });
            });
      }

and then I am adding it to the state:

constructor() {
        super();

        this.state = {
            crypto: [],
        };
    }

Then I am doing rendering that into a list item.

I am doing the same from the chart and the table however, they only get a specific crypto from the endpoint /api/crypto?coin=btc.

All this works fine, the data is shown in the table, the charts show correctly.

What I want to do.

1. 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.
2. 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

I would be extremely grateful for details answers, links and references to videos – tutorials etc…

Thank you

Answer

Firstly, I suspect that your welcome.blade.php is not where you have your

return (
        <div className="example">
            <SideBar />
            <Chart />
            <Table />
        </div>
    );

That is usually in a .js file.

What you need to do is something referred to as ‘lifting up the state’.

This means that you take the state from your individual components, and move them up to a wrapper component.

In your App.js file. It could still be called Example.js if you have not changed it. This is where you will see the:

return (
        <div className="example">
            <SideBar />
            <Chart />
            <Table />
        </div>
    );

Take out all the references for state and the functions in your sidebar, chart,table component.

Add that stuff to the App.js file.

Now, when you want to pass info to those components you send them as props.

For example:

return (
        <div className="example">
            <SideBar tickers={tickers}/>
            <Chart data={data} />
            <Table data={data}/>
        </div>
    );

These then become what is known as Controlled Componenents and they are stateless. They only rely on the information passed to them. So when the state changes in App.js it will update the lower components.

Check out: https://www.youtube.com/user/programmingwithmosh he is really good and as you mentioned is an issue before, he has great english and very in-depth.

Good luck and well done on using the lockdown for some education and self-betterment.