Fetching multiple API request and passing data from parent to child - reactjs

Question

I'm newbie to programming and trying to build React App with REST API. Currently I retrieve and pass data from parent to child components by having two fetchData function in parent component since they have different API parameter. However, I'm doubt that this should be the right way as I still have more child components to build. It also has problem showing the data when refreshing a component page, I should navigate on routes before it shows. Please advise or link me a sample method on how should I handle my case.
Parent:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import {NavDropdown, Nav, Navbar} from 'react-bootstrap';
import axios from 'axios';
import * as constants from './components/constants/Constants'
import Home from './components/dashboard/home';
import AddCategories from './components/category/AddCategories';
import ViewCategories from './components/category/ViewCategories';
import AddAssets from './components/assets/AddAssets';
import ViewAssets from './components/assets/ViewAssets';
import './App.css';
class App extends Component{
constructor(props){
super(props);
this.state = {
assetItems:[],
categoryItems:[],
items : [],
currentPage: 1,
totalPages: 1,
totalItems: 1,
}
}
getAssetAssetItems=()=>{
this.setState({
currentPage: 1,
});
axios.get(constants.apiURL + 'Assets?&ShowAll=false')
.then(
(result)=>{
this.setState({assetItems: result.data.list, totalPages: result.data.totalPage, totalItems: result.data.total})
})
.catch(error =>console.log(error));
}
getCategoryItems=()=>{
axios.get(constants.apiURL + 'Categories?&ShowAll=false')
.then(
(result)=>{
this.setState({categoryItems: result.data.list, totalPages: result.data.totalPage, totalItems: result.data.total})
console.log(this.state.totalPages)
console.log(this.state.currentPage)
})
.catch(error =>console.log(error));
}
componentDidMount=()=>{
this.getAssetAssetItems();
this.getCategoryItems();
}
render(){
return(
<Router>
<div>
<Navbar bg="light" expand="lg">
<Navbar.Brand as={Link} to='/'>Asset Management</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link as={Link} to='/Home'>Home</Nav.Link>
<Nav.Link as={Link} to='/Assets'>Assets</Nav.Link>
<NavDropdown title="Manage" id="basic-nav-dropdown">
<NavDropdown.Item as={Link} to='/manage/category'>Categories</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item as={Link} to='/manage/manufacturers'>Manufacturers</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Models</NavDropdown.Item>
<NavDropdown.Item href="#action/3.4">Processors</NavDropdown.Item>
<NavDropdown.Item href="#action/3.5">Suppliers</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item>Sizes</NavDropdown.Item>
<NavDropdown.Item href="#action/3.6"> Hard Disk</NavDropdown.Item>
<NavDropdown.Item href="#action/3.7"> Memory</NavDropdown.Item>
<NavDropdown.Item href="#action/3.8"> Video Card</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="users">Users</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Route path='/Home' exact component={Home}/>
<Route path='/Assets'>
<AddAssets/>
<ViewAssets assetItems={this.state.assetItems}/>
</Route>
<Route path='/manage/category'>
<AddCategories/>
<ViewCategories categoryItems={this.state.categoryItems} totalPages={this.state.totalPages}/>
</Route>
</div>
</Router>
)
}
}
export default App;
Child 1:
import React, {Component} from 'react';
import {Button, Table} from 'react-bootstrap';
import axios from 'axios';
class ViewAssets extends Component{
constructor(props){
super(props);
this.state = {
assetItems : this.props.assetItems,
assetKeys : [],
currentPage: 1,
totalPage: 1,
totalItems: 1,
}
}
generateColumnHeader(){
return(
<tr >
<th>ID</th>
<th>Serial No.</th>
<th>Asset Tag</th>
<th>Host Name</th>
<th>Assigned To</th>
<th>Status Type</th>
<th>Manufacturer Name</th>
<th>Category Name</th>
<th>Purchase Date</th>
<th>Warranty</th>
<th>Actions</th>
</tr>
);
}
generateRowsData=()=>{
return(
this.state.assetItems.map(assets=>{
return(
<tr key={assets.id}>
<td>{assets.id}</td>
<td>{assets.serialNo}</td>
<td>{assets.assetTag}</td>
<td>{assets.name}</td>
<td>{assets.assignedTo}</td>
<td>{assets.statusType}</td>
<td>{assets.manufacturerName}</td>
<td>{assets.categoryName}</td>
<td>{assets.purchaseDate}</td>
<td>{assets.warranty}</td>
<td>{this.generateActionButtonInfo()}{this.generateActionButtonEdit()}</td>
</tr>
);
})
)
}
generateActionButtonInfo=()=>{
return(
<Button type="submit" value ="Info" variant="info" onClick={this.showInfo}>Info</Button>
)
}
generateActionButtonEdit=()=>{
return(
<Button type="submit" value ="addCategory" variant="secondary" onClick={this.handleEdit}>Edit</Button>
)
}
generateAssetTable(){
return(
<Table striped bordered hover>
<thead>{this.generateColumnHeader()}</thead>
<tbody>{this.generateRowsData()}</tbody>
</Table>
)
}
render(){
return(
<div>
<div className="container">
<div className="d-flex justify-content-center">
{this.generateAssetTable()}
</div>
</div>
</div>
);
}
}
export default ViewAssets;

Answer 1

You can make api calls inside the success callback of the previous api call , and in the final success callback, you can do a single setstate. You can also show the progress percentage using axios's onUploadProgress / onDownloadProgress .
For the final touch , you can have an error page if anything goes wrong , and render that if any issues during the api calls.