score:10

Accepted answer

you could use an object to store the dynamic properties and then use jsx spread attributes.

https://facebook.github.io/react/docs/jsx-spread.html

const propbag = { [`data-${foo}`] = 'bar' };
return (
  <div {...propbag}>
     {this.props.children}
  </div>
);

that is using the computed properties feature of es6 as well as template literal strings. if you are not using es6 features you could do an es5 implementation like so:

var propbag = {};
propbag['data-' + foo] = 'bar';
return (
  <div {...propbag}>
     {this.props.children}
  </div>
);

Related Query

More Query from same tag