React Basic Components, The React Router, And Using An External API
First we are going to look at our components, then we are going to put them together, and then we are going to take a look at how we’re communicating with an external API.
First a place-holder for spiritual notes and contemplations
// Contemplations.jsx
import React from 'react';
function Contemplations() {
return (
Contemplations
Coming Soon...
);
}
export default Contemplations;
Next, a placeholder for text searches within the Buddhist sacred text, called the Dhammapada.
// Dhammapada.jsx
import React from 'react';
function Dhammapada() {
return (
Dhammapada
Coming Soon...
);
}
export default Dhammapada;
Now a placeholder for Hindu Bhagavadgita.
// Bhagavadgita.jsx
import React from 'react';
function Bhagavadgita() {
return (
Bhagavad Gita
Coming Soon...
);
}
export default Bhagavadgita;
Now a component that has an integrated search feature and allows you to find verses in the Quran:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ReactPaginate from 'react-paginate';
import './App.css'; // Import CSS for pagination styles
import quranCover from './media/a-picture-frame-with-the-words-quran-on-it-free-photo.jpg'; // Import image of the Quran cover
function Quran() {
const [verses, setVerses] = useState([]);
const [page, setPage] = useState(0); // Start from page 0
const [totalPages, setTotalPages] = useState(0);
const [searchTerm, setSearchTerm] = useState('');
const limit = 10; // Number of results per page
const fetchData = async () => {
if (searchTerm !== '') {
try {
const response = await axios.get(`http://api.alquran.cloud/v1/search/${encodeURIComponent(searchTerm)}/all/en`);
if (response.data && response.data.data && response.data.data.matches) {
setVerses(response.data.data.matches); // Corrected verses access
setTotalPages(Math.ceil(response.data.data.count / limit)); // Corrected count access
} else {
console.error('Error: Data structure is incorrect', response.data);
}
} catch (error) {
console.error('Error fetching data: ', error);
}
}
};
useEffect(() => {
fetchData(); // Fetch data initially
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [page]); // Fetch data when page changes
const handlePageClick = (selectedPage) => {
setPage(selectedPage.selected);
};
const handleSearchSubmit = (e) => {
e.preventDefault();
setPage(0); // Reset page to 0 when performing a new search
fetchData(); // Fetch data when search is submitted
};
const paginatedVerses = verses.slice(page * limit, (page + 1) * limit);
return (
Quran
{searchTerm === '' ? (
) : paginatedVerses.length > 0 ? (
{verse.number}: {verse.text}
{verse.surah.name} - {verse.surah.englishName}
))}
) : (
No results found
)}
);
}
export default Quran;
and now a React component that allows you to search and find Bible verses with the keywords of your choice:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ReactPaginate from 'react-paginate';
import './App.css'; // Import CSS for Bible styles
function Bible() {
const [verses, setVerses] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [page, setPage] = useState(0);
const [totalPages, setTotalPages] = useState(0); // Add totalPages state
const limit = 10; // Number of results per page
useEffect(() => {
const offset = page * limit;
axios.get(`https://api.scripture.api.bible/v1/bibles/06125adad2d5898a-01/search?query=${searchTerm}&sort=canonical&range=gen-rev&fuzziness=AUTO&offset=${offset}&limit=${limit}`, {
headers: {
'accept': 'application/json',
'api-key': 'e052df7f70f61d8b6d187a681975cf90'
}
})
.then(response => {
if (response.data && response.data.data && response.data.data.verses) {
setVerses(response.data.data.verses);
setTotalPages(Math.ceil(response.data.data.total / limit)); // Calculate total pages
} else {
console.error('Error: Data structure is incorrect', response.data);
}
})
.catch(error => {
console.error('Error fetching data: ', error);
});
}, [searchTerm, page]);
const handlePageClick = (data) => {
const selectedPage = data.selected;
setPage(selectedPage);
};
return (
Bible
{verse.reference}: {verse.text}
))}
);
}
export default Bible;
In the next article, I will share the App.js file and we will go into detail regarding the critical bits of code!
Responses