<p>Is there a way to add properties to a React component only when certain conditions are met? </p> <p>I need to add required and readOnly attributes to the form element based on conditions in the post-rendered Ajax call, but I don't know how to solve this problem because <code>readOnly="false"</code> is completely different from Omitting attributes is different. </p> <p>The example below should illustrate what I want, but it doesn't work. </p> <blockquote> <p>(Parse error: unexpected identifier)</p> </blockquote> <pre class="brush:js;toolbar:false;">function MyInput({isRequired}) { return <input classname="foo" {isRequired ? "required" : ""} /> } </pre> <p><br /></p>

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition) {
  inputProps.disabled = true;
}

const InputComponent = function() {
    const required = true;
    const disabled = false;

    return (
        
    );
}