Sigo recibiendo este error. Intenté cambiar el div a un lapso u otro elemento html, pero eso no funcionó. Voy a hacer que aparezca el div "no-link-show" debajo del cuadro de entrada si el código no pasa la expresión regular. La lista de clases se agregará a la entrada, pero el div "no-link-show" que está configurado para mostrar: se supone que ninguno debe cambiar a bloque, pero no lo hace. Pensé que era un efecto secundario de reaccionar e intenté usar useEffect pero luego recibí el error de que no estaba usando el gancho correctamente. El div está en jsx. No sé por qué la propiedad aparece como nula.

 import React from "react" export default function Form() { function shortenLink(event) { event.preventDefault() const regexp = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[az\u00a1-\uffff0-9]-*)*[az\u00a1-\uffff0-9]+)(?:\.(?:[az\u00a1-\uffff0-9]-*)*[az\u00a1-\uffff0-9]+)*(?:\.(?:[az\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/; if (regexp.test(input.value)) { fetch(`https://api.shrtco.de/v2/shorten?url=${input.value}`) .then(res => res.json()) .then(data => console.log(data)) } else { document.getElementById("input").classList.add('noLink') **Here this keeps showing up as null, when I dont know why. the DOM element is in the jsx** document.querySelector("no-link-show").style.display = "block" } } return ( <form id="form" onSubmit={shortenLink}> <input id="input" type="text" name="link" className='input' placeholder="Shorten a link here..." /> <div className="no-link-show"> Please add a link </div> <button>Shorten It</button> </form> ) }