What is the best way to have variable attributes in JSX?
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
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 } />
);
};