Add linear gradient and url nested inside a background image declaration using React js

Question

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 (https://reactjs.org/docs/dom-elements.html#style) and seen many examples, but none answer my question.

Here is my react 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(() => {
        setUrl(
            {
                background-image: 'linear-gradient(rgba(211, 211, 211, .7), rgba(211, 211, 211, .7)), url("https://freshmommyblog.com/wp-content/uploads/2020/11/cinnamon-rolls-400-cropped.jpg")',
                background-size: 'cover',
            }
        );
    return (
        <Link style={url}
        className='box_links' 
        to='/box-links'>
            <div className='box_label' >
                <h3>Recipes</h3>
            </div>
        </Link>
    );
}

export default Box_Links;

This is the trouble making line:

{
  background-image: 'linear-gradient(rgba(211, 211, 211, .7), rgba(211, 211, 211, .7)), url("https://freshmommyblog.com/wp-content/uploads/2020/11/cinnamon-rolls-400-cropped.jpg")',
  background-size: 'cover'
}

This is the error I keep getting (the carrot '^' is actually under the 'r' in 'rolls':

\box_link.js: Unexpected token, expected "," (11:26)

   9 |         setUrl(
  10 |             {
> 11 |                 background-image: 'linear-gradient(rgba(211, 211, 211, .7), rgba(211, 211, 211, .7)), url("https://freshmommyblog.com/wp-content/uploads/2020/11/cinnamon-rolls-400-cropped.jpg")',
     |                                                                                  ^
  12 |                 background-size: 'cover',
  13 |             }
  14 |         );

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?

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:

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

import './box_link.css';

function Box_Links(props) {
  const [url, setUrl] = useState({});

  useEffect(() => {
    setUrl({
      'background-image': 'linear-gradient(rgba(211, 211, 211, .7), rgba(211, 211, 211, .7)), url("https://freshmommyblog.com/wp-content/uploads/2020/11/cinnamon-rolls-400-cropped.jpg")',
      'background-size': 'cover',
    });
  }, []);

  return (
    <Link
      style={url}
      className="box_links"
      to="/box-links"
    >
      <div className="box_label">
        <h3>Recipes</h3>
      </div>
    </Link>
  );
}

export default Box_Links;

Why are trying that in a useEffect? Why not put it in your style sheet? https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element — wjpayne83, Feb 28 '21 at 03:12
I'm not passing props right now because I'm trying to make this simple to post about, but I will need to be adding dynamic urls as the background image — ezg, Feb 28 '21 at 03:15
You have multiple syntax errors, I highly suggest using a linter to catch these errors. — Patrick Roberts, Feb 28 '21 at 03:15
I hate adding styles outside of the style sheet but I don't know of another way to do this dynamically. The user will have the authority of what image displays — ezg, Feb 28 '21 at 03:17
Either way I’ve never seen styles used like that in a useEffext hook. But what do I know. — wjpayne83, Feb 28 '21 at 03:18
Maybe use inline styles and pass the prop there? If they can choose the url that makes sense yeah? — wjpayne83, Feb 28 '21 at 03:20
@wjpayne83 can you provide an example of that which works? Because I tried that and it didn't work — ezg, Feb 28 '21 at 03:22
@ezg Normally, I would have just posted the link to ESLint in a comment, but it was too long and Stack Overflow doesn't allow URL shorteners. — Patrick Roberts, Feb 28 '21 at 03:46

score 1 · Answer 1 · answered Feb 28 '21 at 03:45

Pasting your code as-is into ESLint immediately reveals multiple syntax errors in your code, which you need to fix:

Neither background-image nor background-size are valid property names, they need to be quoted.
You're missing closing braces and parentheses at the end of useEffect.

After applying these changes and further code formatting improvements, you're left with the following:

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

import './box_link.css';

function Box_Links(props) {
  const [url, setUrl] = useState('');

  useEffect(() => {
    setUrl({
      'background-image': 'linear-gradient(rgba(211, 211, 211, .7), rgba(211, 211, 211, .7)), url("https://freshmommyblog.com/wp-content/uploads/2020/11/cinnamon-rolls-400-cropped.jpg")',
      'background-size': 'cover',
    });
  }, []);

  return (
    <Link
      style={url}
      className="box_links"
      to="/box-links"
    >
      <div className="box_label">
        <h3>Recipes</h3>
      </div>
    </Link>
  );
}

export default Box_Links;

Thank you! I can accept it as the right answer if you switch the empty string out with empty curly brackets "useState({})". This causes an error on the first rendering since the style attribute gets set to an empty string, which is invalid — ezg, Feb 28 '21 at 05:37
@ezg I don't mind this answer not being accepted. As I said earlier, I would have summarized this content in a comment if it were possible, as the initial question you asked was about resolving these syntax errors. I'm glad you were able to identify the remaining issues on your own. — Patrick Roberts, Feb 28 '21 at 05:55
Robberts lol I just figured you'd want to change your code so that it doesn't have errors when ran — ezg, Feb 28 '21 at 18:46

Add linear gradient and url nested inside a background image declaration using React js

1 Answers1