title: Inlining dynamic css style in JSX
body: <p>I have a hundred images which I want to add as a background to 100 <strong>div</strong> elements in my page.</p>
  
  <p>I have a common style (<strong>style</strong>), and then I have the variable part which is the image. I use <strong>Object.assign</strong> to create <em>style1, style2, style3</em> etc, which merges the static with the variable part.</p>
  
  <p>It looks something like this :</p>
  
  <pre><code>let style = {width:w, height:h, backgroundColor:'red', border :'5px solid red'}
  
  let style1 = Object.assign(style, {backgroundImage:"url(" + img1 + ")"});
  let style2 = Object.assign(style, {backgroundImage:"url(" + img2 + ")"});
  ....
  let style100 = Object.assign(style, {backgroundImage:"url(" + img100 + ")"});
  
  
  return (
    &lt;div&gt;
        &lt;div style={style1}&gt;1&lt;/div&gt;
        &lt;div style={style2}&gt;2&lt;/div&gt;
        &lt;div style={style3}&gt;3&lt;/div&gt;
  
      ...
  
        &lt;div style={style99}&gt;99&lt;/div&gt;
        &lt;div style={style100}&gt;100&lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>This looks very ugly...</p>
  
  <p>Is there an 'inline' way of doing this? Something like so :</p>
  
  <pre><code>&lt;div style={Object.assign(style, {backgroundImage:"url(" + img1 + ")")}&gt;1&lt;/div&gt;
  &lt;div style={Object.assign(style, {backgroundImage:"url(" + img2 + ")")}&gt;2&lt;/div&gt;
  </code></pre>