What is the best way to have variable attributes in JSX?

Question

Hopefully my question is clear, I'm mainly looking for a way to dynamically attach attributes to a JSX input.

<input type="text" {variableAttribute}={anotherVariable} />

Is something like this possible without overriding the way JSX compiles from JS to regular HTML?

Answer 1

You can initialize an object with a computed property name, and then use JSX Spread Attributes to convert it to attribute:

const DemoComponent = ({ variablePropName, variablePropValue }) => { 
    const variableAttribute = { [variablePropName]: variablePropValue };
    return (
        <input type="text" { ...variableAttribute } />
    );
};

Answer 2

You can't do it the way you are doing. You need to define your attributes as object and pass that as spread attributes.

The properties of the object that you pass in are copied onto the component's props.

You can use this multiple times or combine it with other attributes.

var Hello = React.createClass({
      render: function() {
        
        var opt = {}
        opt['placeholder'] = "enter text here";
        return (<div>
        Hello {this.props.name}
        <div>
         <input type="text" {...opt}/>
        </div></div>);
      }
    });
    
    ReactDOM.render(
      <Hello name="World" />,
      document.getElementById('container')
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

DOCS