how to write good anchors in react.js

Question

I had code in react js but the are problem to write anchor with href . form example this below code

import React from "react";

function Browser() {
  return (
    <div>
      <section className="flex bg-gray-100 py-16 px-4" id="browse-the-room">
        <div className="container mx-auto">
          <div className="flex flex-start mb-4">
            <h3 className="text-2xl capitalize font-semibold">
              browse the room <br className="" />
              that we designed for you
            </h3>
          </div>
          <div className="grid grid-rows-2 grid-cols-9 gap-4">
            <div className="relative col-span-9 row-span-1 md:col-span-4 card" style={{ height: "180px" }}>
              <div className="card-shadow rounded-xl">
                <img src="./images/content/image-catalog-1.png" alt="" className="w-full h-full object-cover object-center overlay overflow-hidden rounded-xl" />
              </div>
              <div className="overlay left-0 top-0 bottom-0 flex justify-center flex-col pl-48 md:pl-72">
                <h5 className="text-lg font-semibold">Living Room</h5>
                <span className="">18.309 items</span>
              </div>
              <a href="details.html" className="stretched-link"></a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default Browser;

but they are warning when I used anchor with href

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in src\components\Browser.js
  Line 23:15:  Anchors must-have content and the content must be accessible by a screen reader  jsx-a11y/anchor-has-content
  Line 33:15:  Anchors must-have content and the content must be accessible by a screen reader  jsx-a11y/anchor-has-content
  Line 43:15:  Anchors must have content and the content must be accessible by a screen reader  jsx-a11y/anchor-has-content
  Line 53:15:  Anchors must have content and the content must be accessible by a screen reader  jsx-a11y/anchor-has-content

webpack compiled with 1 warning

can I solve this problem? please help me to solve this problem

Answer 1

Put content inside the link so people:

• have something to click on
• know where the link will take them

<a href="foo">Visit Foo</a>

Answer 2

Basically you're leaving the anchor empty and it has poor accessibility. I suggest you putting some text into the tag