How do I conditionally add attributes to React components?


Is there a way to only add attributes to a React component if a certain condition is met?

I'm supposed to add required and readOnly attributes to form elements based on an Ajax call after render, but I can't see how to solve this since readOnly="false" is not the same as omitting the attribute completely.

The example below should explain what I want, but it won't work (Parse Error: Unexpected identifier).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={}/>

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
    componentDidMount: function () {
            isRequired: true
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />

This question is tagged with javascript reactjs

~ Asked on 2015-07-01 14:07:27

The Best Answer is


Apparently, for certain attributes, React is intelligent enough to omit the attribute if the value you pass to it is not truthy. For example:

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

    return (
        <input type="text" disabled={disabled} required={required} />

will result in:

<input type="text" required>

Update: if anyone is curious as to how/why this happens, you can find details in ReactDOM's source code, specifically at lines 30 and 167 of the DOMProperty.js file.

~ Answered on 2015-07-01 14:23:58


juandemarco's answer is usually correct, but here is another option.

Build an object how you like:

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

if (condition)
  inputProps.disabled = true;

Render with spread, optionally passing other props also.

    value="this is overridden by inputProps"

~ Answered on 2015-07-01 14:34:52

Most Viewed Questions: