React Listing Api

React Listing Api

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

const About = () => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://localhost/api/product/read.php')
        const result = await response.json()
      
        setData(result.records)
      } catch (error) {
        setError(error)
      } finally {
        setLoading(false)
      }
    }
// const keys = Object.keys(data.length ? data[0] : {});
    fetchData()
  }, [])

  

  if (loading) {
    return <p>Loading data...</p>
  }

  if (error) {
    return <p>Error fetching data: {error.message}</p>
  }

  return (    
    <div>
    <div className="container">

        <form    >
        <input type="text" value="dsadas" />
        <input type="email"  value="dsadas"  />
        <button type="submit">Create User</button>
      </form>
   <label> Result </label>
  <table className="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
        {
        data.map(item => (
          <tr>
          <td key={item.id}>{item.id}</td>
           <td key={item.id}>{item.description	}</td>
           <td key={item.id}>{item.category_id	}</td>
           <td key={item.id}>
            <button type="button" className="btn btn-primary" onclick="handleCreateUser()" >ss Primary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
             </td>
          </tr>
        ))}
         </tbody>
    </table>
     </div>
    </div>
  )
}

export default About