import React, { useEffect, useState } from 'react';

function App() {
const [data, setData] = useState([]);

useEffect(() => {
// Function to fetch data from the API
const fetchData = async () => {
try {
// Make the API call
const response = await fetch('https://example.com/api/endpoint');

    // Check if the request was successful
    if (response.ok) {
      // Parse the HTML content
      const htmlText = await response.text();
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlText, 'text/html');

      // Find the HTML elements containing the data you want to extract
      const dataElements = doc.querySelectorAll('.data-element');

      // Extract the data from the HTML elements
      const extractedData = Array.from(dataElements).map(element => element.textContent.trim());

      // Set the extracted data in the state
      setData(extractedData);
    } else {
      console.error('Failed to fetch data from the API:', response.status);
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// Call the fetchData function when the component mounts
fetchData();

}, []); // Empty dependency array ensures this effect runs only once on mount

return (

Extracted Data

{item}

);
}

export default App;

Blog

How to Handle html response from api or axios

Vimal

Extracted Data

Join Our Newsletter. No Spam, Only the good stuff.

Related