Can I set an input field to readonly in React while keeping my onChange function?

Question

I have the following React render function:

render: function() {
  return <input type="text" name="my-input-field" value={this.state.myObject} onChange={myFunction} />;
}

I would like to have this input field be readonly upon some condition that I have checked for. My understanding is that this input field would default to readonly if I didn't have the onChange function. Simply adding the readOnly tag hasn't worked for me.

How can i rewrite this so that I can later change the readonly status?

Answer 1

You can use spread attributes to do that:

render: function() {
  var opts = {};
  if( /* here your condition */ ) {
      opts['readOnly'] = 'readOnly';
  }

  return (
    <input 
      type="text" 
      name="my-input-field" 
      value={this.state.myObject} 
      onChange={myFunction} 
      {...opts} 
    />
  );
}