Variable interpolation inside nested quotations in React JSX

Question

I am new in react, don't know how to display photo inside nested quotations, I know the usages of Variable interpolation inside single quote: {assets/images/categories/${photo}} but don't know how to make dynamic cat-2.jpg

const AllItems = ({ post: { id, name, type, photo } }) => {
  return (
    <div className="col-lg-2 col-md-2 col-sm-4 col-xs-6">
      <div className="product__discount__item">
        <div
          className="product__discount__item__pic set-bg"
          style={{
              backgroundImage: "url('assets/images/categories/cat-2.jpg')"
          }}
        >
          <div className="product__discount__percent">-20%</div>
        </div>
        <div className="product__discount__item__text">
          <span>{name}</span>
        </div>
      </div>
    </div>
  );
};

score 1 · Answer 1 · answered Nov 14 '21 at 09:14

I have solved using variable

const AllItems = ({ post: { id, name, type, photo } }) => {
  const imgPath = `assets/images/categories/${photo}`;
  return (
    <div className="col-lg-2 col-md-2 col-sm-4 col-xs-6">
      <div className="product__discount__item">
        <div
          className="product__discount__item__pic set-bg"
          style={{
            backgroundImage: `url(${imgPath})`
          }}
        >
          <div className="product__discount__percent">-20%</div>
        </div>
        <div className="product__discount__item__text">
          <span>{name}</span>
        </div>
      </div>
    </div>
  );
};

Variable interpolation inside nested quotations in React JSX

1 Answers1