Binding data from RESTful API to Kanaban in React JS
A combination of a lifecycle hook and the fetch() allow us to bind the data from an external data source
What is a lifecycle hook?
When you work with a functional component and want to "hook into" a lifecycle features you can catch each lifecycle phase in useEffect.
There are three phases: mounting, updating and unmounting.
As a second argument of the useEffect() we can pass a dependency array.
It is used to detect
changes in the component and the callback will be executed when a variable from the dependency array
updates its value.
An example of using useEffect: The callback passed to the useEffect will be invocked only once after mounting in this situation and the cleanup function will be executed when the component unmounts.
import './App.css';
import { useEffect } from 'react';
function App() {
useEffect(() => {
console.log('Mounted');
return function cleanup() {
console.log('Do some cleanup.');
}
}, []);
return (
<h1>My cool component</h1>
);
}
export default App;
What is a fetch()?
The Fetch API provides an interface for fetching resources. It seems similar to XMLHttpRequest, but Fetch provides more powerful and flexible set.
Usage: The fetch() takes one mandatory argument - the path to the resource and one optional argument for initializing the Request object. The method returns a Promise that resolves to a Response object when the server responds. The Response object contains many methods as well as json(). The json() method returns a new Promise that resolves to the body of the response parsed to JSON.
Let's fetch all the countries around the world
import './App.css';
import { useEffect, useState } from 'react';
function App() {
const [countries, setCountries] = useState([]);
useEffect(() => {
fetch('https://restcountries.com/v3.1/all')
.then(res => res.json())
.then(countries => {
setCountries(countries.slice(0,50));
});
}, []);
return (
<h1>My cool component</h1>
<ul>
{
countries
.map(c => <li key={c.area}>{c.name.common}</li>)
}
</ul>
);
}
export default App;
How to combine useEffect and the Fetch API to bind remote data to Kanban?
In the following example we will display the countries in Europe, Amerika and Asia in a Kanban component
To achieve that we should first fetch all the countries via the public API called REST Countries.
We will store the countries in a local state so we can use them in the Kanban component.
Fetching the countries should be done when the component mounts. To do that we will use useEffect with an empty dependency array. The array will be empty because the API url won't change during the component's lifecycle.
In the useEffect's callback we are using the fetch() method to get the countries from the public API.
We are converting the response's data to a JSON.
Our Kanban component require a status and text. Our status will be the continent of the country and the text will be the name of the country. After the mapping the data is being cut to 50 records.
The last step is to save the data in the state and pass the countries to the Kanban component.
import 'smart-webcomponents-react/source/styles/smart.default.css';
import { Kanban } from 'smart-webcomponents-react/kanban';
import { useEffect, useState } from 'react';
function App() {
const apiUrl = 'https://restcountries.com/v3.1/all';
const europePoint = 'Europe';
const americasPoint = 'Americas';
const asiasPoint = 'Asia';
const columns = [
{
label: 'Europe',
dataField: europePoint
},
{
label: 'Amerika',
dataField: americasPoint
},
{
label: 'Asia',
dataField: asiasPoint
}
];
const [kanbanData, setKanbanData] = useState([]);
useEffect(() => {
fetch(apiUrl)
.then(res => res.json())
.then(countries => {
countries = countries
.map(
c => ({
status: c.region,
text: c.name.common
})
)
.slice(0, 50);
setKanbanData(countries);
});
}, []);
return (
<Kanban
columns={columns}
dataSource={kanbanData}
collapsible>
</Kanban>
);
}
export default App;