We Keep Coding

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

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.

How would I go about listening to a route change in reach router?

I have a component I'm trying to build pagination functionality for
<PageNumber>
<StyledLink to="/visited/page/1">1</StyledLink>
<StyledLink to="/visited/page/2">2</StyledLink>
</PageNumber>
so when I click the link it should change the path (which it does)
the problem is my component does not re-render so I can't seem to then display page 2 (even though the route has changed)
how can I listen to the changes in my component? I'm using hooks
I've searched the docs and all the options seem to indicate you should only listen to route changes using LocationProvider and stuff for testing
<Router>
<Visited path="visited/page/:id" />
<AllCountries path="all" />
<Map path="map" />
<Redirect from="visited" to="page/1" />
</Router>

load image as prop in react-native

so I have a customHeader component where I am trying to load images into like so
<Image source={props.logoImg} style={styles.icon} />
and on the page I'll pass in the prop like so
<CustomHeader
navigation={props.navigation} //call props.navigation in component
primaryColor={primaryColor}
coName={coName}
logoImg={require('../content/...some image...'}
/>
This way it doesn't throw an error, but it doesn't load. I know it has something to do with passing it as a prop because I can load images straight into the screens. I'm just not sure what I'm doing wrong or what I'm missing here.
I have tried using the require inside of the component, but that throws an error at compile because react-native needs the images to be "required" at compile.

this should work
in the Wrapping component
<CustomHeader
imageUri={'../content/...some image...'}
/>
and then in the inner component
<Image source={require(props.imageUri)} />

React: Passing Props from grandparent to grandchild

I have a problem with passing props in react. This is my folder structure:
src
Component
Button.js
Container
PageContainer.js
Page
Page.js
I am using Bootstrap 4 to create a Button within Button.js:
<div>
<a className="btn btn-primary sharp" href={this.props.url} role="button">{this.props.btnName}</a>
</div>
There is nothing else in the class Button. So now I put a Button into the class PageContainer:
<div>
<Header/>
<Button url={this.props.urlBack} btnName="Back"/>
<Button url={this.props.urlNext} btnName="Next"/>
</div>
As you can see I passed a title to the buttons: Back and Next. That works fine. I could now add an url and it would work fine, but that's not what I want.
I added the PageContainer to the class Page such that I can add an url at this level:
<div>
<PageContainer urlBack="/" urlNext="/nextPage"/>
</div>
For some reason this is not working. Can someone explain me how I can pass props from grandparent to grandchild? In the documentation it says that this is the way how to do it. I also get no error, because the prop is not passed from Page to PageContainer. A console.log(this.props.urlBack) results in undefined.
PS: Maybe you asking why I am using the Page.js or for what reason do I have the PageContainer. First: There are far more components, I just left them out. Second: I wanna reuse the PageContainer for several pages such that I just have to change the url.

It doesn't look like you are passing props to your <VideoContainer /> component. You are merely assigning it as a routed component <Route />
Your answer can be found here:
React react-router-dom pass props to component
i.e.
<Route path="/algorithmus/bubblesort/video"
render={(props) => <VideoContainer {...props} />}
/>
However, I don't think this will get your your this.props.url and this.props.btnName. this.props.path, yes ..but you may have to revisit some logic there.
UPDATE:
After reading your comment and checking your repo, it doesn't look like there's anything wrong with your setup. I have emulated your BubblesortVideo -> VideoContainer hierarchy at the following:
https://stackblitz.com/edit/react-eaqmua

Rendering children in React, losing props data

I have three react components rendering checkbox groups.
Queries -> renders a group
Query -> renders checkboxes
QueryItem -> render single input[type=checkbox]
I pass down the data coming from Queries as props for the children:
<div className="group queries">
{component.state.groups.map((group, index) => {
return <Query key={group.key} data={group} />
})}
</div>
Then in Query:
<div>
<h1>{component.props.data.label}</h1>
<ul>
{component.props.data.queries.map( (query, index) => {
return <QueryItem key={query.key} data={query} />
})}
</ul>
</div>
And finally in the QueryItem component:
<li>
<input type='checkbox'
ref="input"
defaultChecked={component.props.data.checked}
onChange={component.checkChanged}
name={component.props.data.id}
id={component.props.data.id} />
<label htmlFor={component.props.data.id}>
{component.props.data.label} <em>({component.props.data.total})</em>
</label>
</li>
The data gets rendered correctly. However, when the onChange (checkChanged function) gets invoked:
checkChanged (e) {
console.log(component.props.data)
}
the data in component.props.data is the data from the last QueryItem that was rendered. So, basically, the data is always the same and does not represent the data that was rendered.
You can see, I use the key attribute to make sure the component is unique. If I inspect the data-reactid, I can see they are unique.
What is going on? What am I doing wrong in the type of setup?
Goal of this setup is to invoke a data-call when a checkbox is changed and then trickling down the data from Queries to Query to QueryItem.

Did you by accident declare the variable 'outside the class'? This can lead to unexpected behaviour. Try to initialize all variables properly and see if the problem persists