¿Quiero mostrar un ícono solo si la respuesta es sí?
{ <div className={"options"}> <img src={iconteleconsult} alt={"teleconsultation"}/> </div> }aquí está el ejemplo de código que esto ayudará:
response ? <div className={"options"}> <img src={iconteleconsult} alt={"teleconsultation"} /> </div> : nullPuede hacer lo mismo de esta manera y también renderizar la imagen condicionalmente.
condition && <img ... />
Ejemplo:
const { forwardRef, useState } = React; const Parent = () => { const [isShowImage, setShowImage] = useState(4); const imageShowHandler = () => { setShowImage(isShowImage => !isShowImage); }; return ( <div> { isShowImage && <div className={"options"}> <img src={'https://image.shutterstock.com/image-photo/silhouette-boy-playing-cricket-evening-600w-1605103354.jpg'} alt={"teleconsultation"} /> </div>} <br /> <button onClick={imageShowHandler}>Toggle Image</button> </div> ); }; ReactDOM.render(<Parent />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <div id="root"></div>código mínimo
Defina una imagen predeterminada en un estado y actualícela en función de alguna condición.
const [defaultImage, setDefaultImage] = useState<image> // your image useEffect(() =>{ if(someCondition) { setDefaultImage('newImage'); } }, []) { <div className={"options"}> <img src={defaultImage} alt={"teleconsultation"}/> </div> }De esta manera, en el futuro, si tiene la intención de mostrar imágenes varias veces, no se necesitará if/else en todos los lugares. El mismo código también funcionaría.