Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

how to write good anchors in react.js

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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>

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading