Quiero alternar una etiqueta <p> en reacción en función de si un enlace es una URL o no.
<p style={{color : "red", display : {isValid}}} >Invalid URL</p>La función que determina el valor de isValid es
const [isValid, setIsValid] = useState('none'); const isUriImage = function(uri) { console.log(isValid) setImage_url(uri.target.value); uri = uri.target.value; uri = uri.toString().split('?')[0]; var parts = uri.split('.'); var extension = parts[parts.length-1]; var imageTypes = ['jpg','jpeg','tiff','png','gif','bmp'] if(imageTypes.indexOf(extension) != -1) { setIsValid('none'); console.log("Valid") } else { setIsValid(''); console.log("Not Valid") } } El código funciona bien, ya que lo he confirmado con las declaraciones de console.log, pero la visualización de mi etiqueta <p> no se cambia.
Está configurando la propiedad de visualización como y el objeto con la clave isValid, en su lugar, asigne isValid como variable directamente
<p style={{ color: "red", display: isValid }} >Invalid URL</p>Solo para mencionar, en React, sería mejor no representar la etiqueta p en absoluto si solo desea ocultarla condicionalmente.
Use booleano en su lugar
const [isValid, setIsValid] = useState(false);Renderizar condicionalmente
{isValid && <p style={{ color: "red" }} >Invalid URL</p>}En su escenario, la visualización de su elemento será 'ninguno' pero seguirá estando en DOM. En el escenario anterior, no se representará en DOM.
Simplemente elimine el {} extra alrededor de la variable isvalid .
<p style={{color : "red", display : isValid }} >Invalid URL</p>