title: In React, how to pass a dynamic variable to a const CSS Style list?
body: <p>I'm using <a href="https://github.com/okonet/react-dropzone" rel="noreferrer">react-dropzone</a> to allow a user to upload a profile photo. </p>
  
  <p>I define the custom CSS like so:</p>
  
  <pre><code>const dropzoneStyle = {
    width: `200px`,
    height: `200px`,
    backgroundColor: `#1DA1F2`,
  };
  </code></pre>
  
  <p>Inside the method to render the DropZone input, I can detect if their is a file preview which is populated after a user selects an image to be uploaded..</p>
  
  <p>What I want to do is, if the file.preview exists, send the file.preview the the dropzoneStyle so a background-image is added to the CSS.</p>
  
  <pre><code>const renderDropzoneInput = (field) =&gt; {
    const files = field.input.value;
    let dropzoneRef;
  
    if (files[0]) {
      console.log(files[0].preview)
    }
  
    return (
      &lt;div&gt;
        &lt;Dropzone
          name={field.name}
          ref={(node) =&gt; { dropzoneRef = node; }}
          accept="image/jpeg, image/png"
          style={dropzoneStyle}
        &gt;
  </code></pre>
  
  <p>How can I pass <code>files[0].preview</code> to the style dropzoneStyle with React?</p>