is any one can help me with this issue on tinder cards

Question

i was learning how to build tinder clone, but when i tried to pass some image using url it does not work, i try to change the url but the image takes place without displaying the image. here is my code. tinder cards:

import React, { useState } from 'react';
import TinderCard from 'react-tinder-card';
import './TinderCards.css';

function TinderCards(){
const [people, setpeople] = useState([{
    name: 'jonathan pascal',
    url: "https://static1.purepeople.com/articles/4/86/40/4/@/687935-steve-jobs-a-san-francisco-le-9- 
624x600-3.jpg",
},
{
    name:'bahavu atosha',
    url: "",
}

]); 
return(
    <div>
        <h1>Muhimu cards</h1>
        {people.map(person=> (
            <TinderCard
             className="swipe"
             key={person.name}
             preventSwipe={['up', 'down']}
             >
                <div 
                style={{ backgroundImage: 'url(${person.url})' }} 
                className="card">
                    <h3>{person.name}</h3>
                </div>
            </TinderCard>
        ))}

    </div>
  )
 }
  export default TinderCards;

Answer 1

I solve your problem mainly by fixing a template literals related syntax issue.

import React, { useState } from "react";
import TinderCard from "react-tinder-card";
import "./TinderCards.css";

function TinderCards() {
  const [people, setpeople] = useState([
    {
      name: "jonathan pascal",
      url: "https://static1.purepeople.com/articles/4/86/40/4/@/687935-steve-jobs-a-san-francisco-le-9-624x600-3.jpg", // Line breaking issue exist here before
    },
    {
      name: "bahavu atosha",
      url: "",
    },
  ]);
  return (
    <div>
      <h1>Muhimu cards</h1>
      {people.map((person) => (
        <TinderCard
          className="swipe"
          key={person.name}
          preventSwipe={["up", "down"]}
        >
          <div
            style={{
              backgroundImage: `url(${person.url})` /* Add backticks here */,
            }}
            className="card"
          >
            <h3>{person.name}</h3>
          </div>
        </TinderCard>
      ))}
    </div>
  );
}
export default TinderCards;

Let me know if you need further support.