0

Tengo un proyecto en react y mi código funciona totalmente bien pero me salen estos errores en la consola. He intentando mover algunas etiquetas pero aun así me sigue saliendo los mismos errores, como ya dije no molesta a la hora de la ejecución del programa en si pero aun así no me gusta verlos y quiero saber el porque de esos errores.

Warning: validateDOMNesting(...): <caption> cannot appear as a child of <div>.


validateDOMNesting(...): <th> cannot appear as a child of <tbody>.

A que se debe?

AQUI ESTA EL JSX

 
      <div id="content" className="card text-left " >
        <caption style={styles.title}>INFORMACIÓN DE REGISTRO</caption>
        <Table className="table table-bordered">
          <tbody>
            <tr>
              <th style={styles.th} scope="row" colSpan="1">
                Nombre de la Cuenta:
              </th>
              <td style={styles.td}>{merchantName}</td>
              <th scope="row" style={styles.th}>
                ID:
              </th>
              <td>{Id}</td>
            </tr>
            <tr>
              <th scope="row" style={styles.th}>
                Usuario que registro la cuenta:
              </th>
              <td style={styles.td}>{officerUpdate}</td>
              <th scope="row" style={styles.th}>
                Fecha:
              </th>
              <td style={styles.td}>{activationDate}</td>
            </tr>
            <tr>
              <th scope="row" style={styles.th}>
                Tipo de cuenta:
              </th>
              <td style={styles.td}>{merchantType}</td>
            </tr>
            <tr>
              <td style={styles.td} colSpan="4">
                Los terminos y condiciones son aceptados por defecto al momento
                del registro de la cuenta.
                <a href="https://www.paguelofacil.com/terminos-y-condiciones">
                  https://www.paguelofacil.com/terminos-y-condiciones
                </a>
              </td>
            </tr>                
          </tbody>
        </Table>
      </div>
      <br />

1
  • La tabla necesita reestructuración, y parece haber un typo en el código pues dice Tabla con mayúscula, que hace pensar que es un componente.
    – g.4
    Commented el 25 oct. 2021 a las 3:48

1 respuesta 1

1

Esos warning son de HTML, se deben a lo siguiente:

  • Más Info: caption solo puede ser parte de un table. Por definición es: Es el encargado de darle un título descriptivo a las tablas.
<table>
  <caption></caption>
</table>
  • Más Info: th Es un table header o cabecera de tabla. Por lo que no debería ser usado en TODO el body (Se usa en el body para el caso borde donde necesitas un titulo de la línea, puedes Más info en MDN. En resumen si va en el header es th si va en el body es td. Aunque hay
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.