Recibo esta advertencia y no puedo averiguar por qué: "Valor no válido para el value de utilería en la etiqueta. Elimínelo del elemento o pase una cadena o un valor numérico para mantenerlo en el DOM".
const [inputValues, setInputValues] = useState({}); const sendPost = async () => { if (inputValues.link.length > 0) { setPostList([...postList, inputValues]); setInputValues(''); } else { console.log('Empty inputs. Try again.'); } }; const onInputChange = (event) => { const name = event.target.name; const value = event.target.value; setInputValues(values => ({...values, [name]: value})) }; const renderConnectedContainer = () => ( <div className="connected-container"> <form onSubmit={(event) => { event.preventDefault(); sendPost(); }} > <input type="text" placeholder="Enter title!" name="title" value={inputValues.title || ""} onChange={onInputChange}/> <input type="text" placeholder="Enter link!" name="link" value={inputValues.link || ""} onChange={onInputChange}/> <textarea type="text-area" placeholder="Enter description!" name="description" value={inputValues.description || ""} onChange={onInputChange}/> <button type="submit" className="cta-button submit-post-button">Submit</button> </form> </div> );En el controlador de sendPost , está restableciendo el estado de inputValues a una cadena vacía '' en lugar de volver al estado inicial de un objeto vacío {} . inputValues.title está bien ya que simplemente no está definido, pero inputValues.link ( es decir ''.link ) es en realidad una función obsoleta.
En desuso : esta función ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, es posible que ya se haya eliminado de los estándares web relevantes, que esté en proceso de eliminación o que solo se conserve por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta función puede dejar de funcionar en cualquier momento.
El método
link()crea una cadena que representa el código de un elemento HTML<a>que se utilizará como enlace de hipertexto a otra URL.
Simplemente restablezca los inputValues de entrada al estado inicial.
const sendPost = async () => { if (inputValues.link.length > 0) { setPostList([...postList, inputValues]); setInputValues({}); } else { console.log('Empty inputs. Try again.'); } };