Currently, I have a React application with three cards on a single page. While I've successfully mapped the titles and text content to these cards, I'm struggling to figure out how to map background images to each card using the planet object. How would I go about setting the imported images as the background of each card?
import React, { Component } from "react";
import { Link } from "react-router-dom";
import mars from "../images/mars.jpg";
import venus from "../images/venus.jpg";
import titan from "../images/titan.jpg";
export default class Planets extends Component {
state = {
planets: [
{
planet: "",
title: "Mars",
info: "red planet"
},
{
planet: "",
title: "Venus",
info: "gaseous planet"
},
{
planet: "",
title: "Titan",
info: "moon"
}
]
};
render() {
return (
<section style={{ backgroundColor: 'black', height: '100vh' }} className="planets">
<div className="planets-center">
{this.state.planets.map(item => {
return (
<Link to="/rooms">
<div className="planets-card" style={{ backgroundImage: `url(${item.image})` }}>
<article key={`item-${item.title}`} className="planets">
<h6>{item.title}</h6>
<p>{item.info}</p>
</article>
</div>
</Link>
);
})}
</div>
</section>
)
}
}