title: Add linear gradient and url nested inside a background image declaration using React js
body: <p>Sounds complicated but it really isn't once you see what i'm trying to do.
  Yes, I've read the react documentation about this (<a href="https://reactjs.org/docs/dom-elements.html#style" rel="nofollow noreferrer">https://reactjs.org/docs/dom-elements.html#style</a>) and seen many examples, but none answer my question.</p>
  <p>Here is my react code:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import {Route, Link} from 'react-router-dom';
  
  import './box_link.css'
  
  function Box_Links(props) {
      const [url, setUrl] = useState('');
      useEffect(() =&gt; {
          setUrl(
              {
                  background-image: 'linear-gradient(rgba(211, 211, 211, .7), rgba(211, 211, 211, .7)), url(&quot;https://freshmommyblog.com/wp-content/uploads/2020/11/cinnamon-rolls-400-cropped.jpg&quot;)',
                  background-size: 'cover',
              }
          );
      return (
          &lt;Link style={url}
          className='box_links' 
          to='/box-links'&gt;
              &lt;div className='box_label' &gt;
                  &lt;h3&gt;Recipes&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/Link&gt;
      );
  }
  
  export default Box_Links;
  </code></pre>
  <p>This is the trouble making line:</p>
  <pre><code>{
    background-image: 'linear-gradient(rgba(211, 211, 211, .7), rgba(211, 211, 211, .7)), url(&quot;https://freshmommyblog.com/wp-content/uploads/2020/11/cinnamon-rolls-400-cropped.jpg&quot;)',
    background-size: 'cover'
  }
  </code></pre>
  <p>This is the error I keep getting (the carrot '^' is actually under the 'r' in 'rolls':</p>
  <pre><code>\box_link.js: Unexpected token, expected &quot;,&quot; (11:26)
  
     9 |         setUrl(
    10 |             {
  &gt; 11 |                 background-image: 'linear-gradient(rgba(211, 211, 211, .7), rgba(211, 211, 211, .7)), url(&quot;https://freshmommyblog.com/wp-content/uploads/2020/11/cinnamon-rolls-400-cropped.jpg&quot;)',
       |                                                                                  ^
    12 |                 background-size: 'cover',
    13 |             }
    14 |         );
  </code></pre>
  <p>I've played around with the placing of the commas and the syntax, for the life of me I can't get this to work and when I do, the background image doesn't display, any ideas or tips?</p>
  <p>EDIT/ANSWER:
  Patrick Roberts provided the correct answer; however, his answer has one flaw (the initial value passed to use state) so I'm showing his revised answer below:</p>
  <pre><code>import { useEffect, useState } from 'react';
  import { Link } from 'react-router-dom';
  
  import './box_link.css';
  
  function Box_Links(props) {
    const [url, setUrl] = useState({});
  
    useEffect(() =&gt; {
      setUrl({
        'background-image': 'linear-gradient(rgba(211, 211, 211, .7), rgba(211, 211, 211, .7)), url(&quot;https://freshmommyblog.com/wp-content/uploads/2020/11/cinnamon-rolls-400-cropped.jpg&quot;)',
        'background-size': 'cover',
      });
    }, []);
  
    return (
      &lt;Link
        style={url}
        className=&quot;box_links&quot;
        to=&quot;/box-links&quot;
      &gt;
        &lt;div className=&quot;box_label&quot;&gt;
          &lt;h3&gt;Recipes&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/Link&gt;
    );
  }
  
  export default Box_Links;
  </code></pre>