Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

510
Vistas
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

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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>

about 4 years ago · Juan Pablo Isaza Denunciar

0

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

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda