I want to display an icon only if the answer is yes?
{
<div className={"options"}>
<img src={iconteleconsult} alt={"teleconsultation"}/>
</div>
}
here is the code sample this will help:
response
? <div className={"options"}>
<img src={iconteleconsult} alt={"teleconsultation"} />
</div>
: null
You can do like this way also render image conditionally.
condition && <img ... />
Example:
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>Minimal code
Define a default image in a state and update it based on some condition.
const [defaultImage, setDefaultImage] = useState<image> // your image
useEffect(() =>{
if(someCondition) {
setDefaultImage('newImage');
}
}, [])
{
<div className={"options"}>
<img src={defaultImage} alt={"teleconsultation"}/>
</div>
}
This way in future if you intend to display images mulitple times no if/else would be needed at all places. Same code would work too.