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

setSearchTerm(e.target.value)}
placeholder="Enter search term..."
/>

{searchTerm === '' ? (

Quran Cover

) : paginatedVerses.length > 0 ? (

{paginatedVerses.map((verse, index) => (

{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

e.preventDefault()}>
setSearchTerm(e.target.value)}
placeholder="Enter search term..."
className="bible-input"
/>

{verses.map((verse, index) => (

{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!

Related Articles

Responses

dainis w michel