How to Disable Images in React

Question

I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images? How to do this in React.

I tried adding "disable" to image tag and disabled=true but both didn't work.

const IBox = props => 
  <div  style={props.styles.imageContainer} >
    <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span >&nbsp;</span>
    <img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span>&nbsp;</span>
    <img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span>&nbsp;</span>
    <img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
  </div>
export default IBox;

Answer 1

There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.

That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.

You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.

See also docs for the <img /> tag.

Answer 2

If you mean hide/show.. you simply may use state to disable your image ie

{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}

if by disable you mean to make it like grey, low opacity,etc... you may use an state :

style= this.state.disable? {{style_disable}}: {{style_enable}}

Answer 3

Use <input /> instead of <img /> as in this example. You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.

<input
  type="image"
  disabled={disabled}
/>