I'm writing a simple application that displays by mapping matching data from a data.js file.
This is what the data.js file looks like:
export const data = {
destinations: [
{
name: "Moon",
images: {
png: require("../assets/destination/image-moon.png"),
webp: "../assets/destination/image-moon.webp",
},
description:
"See our planet as you’ve never seen it before. A perfect relaxing trip away to help regain perspective and come back refreshed. While you’re there, take in some history by visiting the Luna 2 and Apollo 11 landing sites.",
distance: "384,400 km",
travel: "3 days",
},
{
name: "Mars",
images: {
png: require("../assets/destination/image-mars.png"),
webp: "../assets/destination/image-mars.webp",
},
description:
"Don’t forget to pack your hiking boots. You’ll need them to tackle Olympus Mons, the tallest planetary mountain in our solar system. It’s two and a half times the size of Everest!",
distance: "225 mil. km",
travel: "9 months",
},
{
name: "Europa",
images: {
png: require("../assets/destination/image-europa.png"),
webp: "../assets/destination/image-europa.webp",
},
description:
"The smallest of the four Galilean moons orbiting Jupiter, Europa is a winter lover’s dream. With an icy surface, it’s perfect for a bit of ice skating, curling, hockey, or simple relaxation in your snug wintery cabin.",
distance: "628 mil. km",
travel: "3 years",
},
{
name: "Titan",
images: {
png: require("../assets/destination/image-titan.png"),
webp: "../assets/destination/image-titan.webp",
},
description:
"The only moon known to have a dense atmosphere other than Earth, Titan is a home away from home (just a few hundred degrees colder!). As a bonus, you get striking views of the Rings of Saturn.",
distance: "1.6 bil. km",
travel: "7 years",
},
],
This is what the page code looks like:
import React, { useState, useEffect, useRef } from "react";
import styled from "styled-components";
import backgroundImage from "../assets/destination/background-destination-mobile.jpg";
import planet from "../assets/destination/image-moon.png";
// import data from "../data/data.json";
import { data } from "../data/data";
export const Wrapper = styled.div`
height: 100vh;
width: 100vw;
background-image: url(${backgroundImage});
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
`;
export const Title = styled.div`
margin-top: 6rem;
color: white;
display: flex;
letter-spacing: 2px;
white-space: nowrap;
`;
export const ImageContainer = styled.div`
width: 80%;
display: flex;
justify-content: center;
align-items: center;
& img {
height: 130px;
width: 130px;
}
`;
export const PlanetChoose = styled.div`
/* background-color: red; */
width: 90%;
display: flex;
justify-content: space-around;
margin-top: 10px;
& p {
color: #d0d6f9;
cursor: pointer;
}
`;
export const ImageTest = styled.img`
width: 150px;
height: 150px;
`;
function Destination() {
const [toggle, setToggle] = useState("");
return (
<Wrapper>
<Title>
<p style={{ marginRight: "10px", color: "grey", fontWeight: "bold" }}>
01
</p>
<p>PICK YOUR DESTINATION</p>
</Title>
<ImageContainer>
//HERE I WANT TO PASS URL FROM MAP
<img src={planet} alt="planet"></img>
</ImageContainer>
<PlanetChoose>
{data.destinations.map(({ name, images }) => {
return (
<>
<p onClick={() => setToggle(name)}>{name}</p>
</>
);
})}
</PlanetChoose>
<h1>{toggle}</h1>
</Wrapper>
);
}
export default Destination;
When I press the 'p' tag the corresponding header and the rest of the data within the mapping is displayed. The question, however, is how to move the url of an image that is outside the mapping in the ImageContainer?