0

i'm working with some CRUDS using React, but when I added divs to help organize the buttons, this error or warning appears: VM72 react_devtools_backend.js:4026 Warning: validateDOMNesting(...): <input> cannot appear as a child of <table>. This is my code

 <tbody>
          {recolectores.map((reco) => (
            <tr key={reco.id}>
              <td>{reco.id}</td>
              <td>{reco.primer_nombre + " " + reco.primer_apellido}</td>
              <td>{reco.direccion}</td>
              <td>{reco.correo}</td>
              <td>
                <React.Fragment>
                  <div className="flex flex-wrap  space-x-1">
                    {reco?.rutas?.map((ruta) => (
                      <div className="badge  badge-md " key={ruta?.id}>
                        {ruta?.nombre}
                      </div>
                    ))}
                  </div>
                </React.Fragment>
              </td>

As it is, I've heard about react fragments, but the problem remains Someone knows how to get this?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
rosembergh mendoza
  • 9
  • 1
  • 1
    Does this answer your question? [Is a DIV inside a TD a bad idea?](https://stackoverflow.com/questions/1110915/is-a-div-inside-a-td-a-bad-idea) – vighnesh153 Oct 12 '22 at 01:29
  • 1
    Check the permitted parent of [DIV](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) element, [Flow content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content) – Satpal Oct 12 '22 at 01:43
  • 1
    The error message seems to indicate that the problematic node is not a div, it's an input. Any chance you've got an `` nested directly underneath a `` element somewhere in your code not shown above? That won't work; table has a strict content model.
     – Daniel Beck Oct 12 '22 at 01:49
  • Yeah, you guys are right. The problem was caused cause i rendered a modal inside the table accidentally.It works now! – rosembergh mendoza Oct 14 '22 at 20:41

0 Answers0