updated blog entries component

// ./react-frontend/my-react-app/src/components/BlogEntries.js

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

import { Link, NavLink } from "react-router-dom"; // Assuming you're using React Router

import { NavLink } from "react-router-dom";

const BlogEnties = () => {

const BlogEntries = () => {

  const [entries, setEntries] = useState([]);

  const [loading, setLoading] = useState(true);

  const [error, setError] = useState(null);

      <h2>Blog Entries</h2>

      <hr />

      {entries && (

      {entries.length > 0 ? (

        <table className="table">

          <thead>

            <tr>

              <th>ID</th>

              <th>Title</th>

              <th>Slug</th>

              <th>Published</th>

              <th>Updated</th>

              <th>Actions</th>

              <th scope="col">ID</th>

              <th scope="col">Title</th>

              <th scope="col">Slug</th>

              <th scope="col">Published</th>

              <th scope="col">Updated</th>

              <th scope="col">Actions</th>

            </tr>

          </thead>

          <tbody>

                <td>

                  <NavLink

                    className="btn btn-hoh-blue btn-sm"

                    to={`/update-entry/${entry.slug}`}

                    to={`/update-blog-entry?entry_slug=${entry.slug}`}

                  >

                    Update entry

                  </NavLink>

                  {/* <Link to={`/update-entry/${entry.id}`}>Update</Link> */}

                </td>

              </tr>

            ))}

          </tbody>

        </table>

      ) : (

        <div class="alert alert-info" role="alert">

        No entries available!

        </div>

      )}        

    </div>

  );

};

export default BlogEnties;

export default BlogEntries;