Display JSON array in react component - arrays

Question

i have Array of image urls:
"image": [
"https://i.imgur.com/QHQaUxi.jpg",
"https://i.imgur.com/GNjH4mZ.jpg",
"https://i.imgur.com/py9IkGa.jpg",
],
my YachtDetailsData looks like this:
{
"id": "1",
"name": "Rarity",
"title": "Modern facilities, sophisticated style and chic deck areas make luxury yacht RARITY one of the most sought-after charter yachts in her class. Her large beam of 10m offers extra onboard space with wide deck areas, making RARITY the ideal yacht tocharter for events such as the Grand Prix",
"description": "The 180'5 / 55m Custom motor yacht 'Rarity' was built in 2008 by Rossi Navi and last refitted in 2017. Officina Italiana Design is responsible for her beautiful exterior and interior design. Previously named Syna, her interior combines timeless styling and beautiful furnishings. She offers large volumes, an open plan Main Salon and dining room, a fully equipped gym and a sky lounge with 220-inch cinema screen. Rarity’s interior layout sleeps up to 12 guests in 6 guest cabins.",
"price": "235.000€",
"guests": "12 guests",
"length": "55 meters",
"build": "2008",
"cabins": "06",
"refit": "2017",
"maxSpeed": "15.5 kt",
"builder": "Rossinavi",
"location": "Mediterranean",
"crew": "12",
"coverImage": "https://i.imgur.com/U7yw2EF.jpg",
"image": [
"https://i.imgur.com/QHQaUxi.jpg",
"https://i.imgur.com/GNjH4mZ.jpg",
"https://i.imgur.com/py9IkGa.jpg",
"https://i.imgur.com/4n3sZxb.jpg",
"https://i.imgur.com/8CbKNUm.jpg",
"https://i.imgur.com/R5eIKmQ.jpg",
"https://i.imgur.com/zEJ8Oxa.jpg",
"https://i.imgur.com/PfuoqQQ.jpg",
"https://i.imgur.com/IgxuEA7.jpg",
"https://i.imgur.com/8GNUaSx.jpg",
"https://i.imgur.com/3kUArby.jpg",
"https://i.imgur.com/1xhp0DT.jpg",
"https://i.imgur.com/flmYnDc.jpg"
],
"video": ""
},
i have got 7 objects with image array and i want do display each image in React image slider:
import YachtDetailsData from "../data/YachtList.json"
interface Props {
match: any
}
const YachtDetails: React.FC<Props> = ({match}) => {
const yachtData = YachtDetailsData.find(yacht => yacht.id === match.params.id)
const slider = (
<AwesomeSlider>
<div><img src={yachtData?.image[]} alt=""/></div>
</AwesomeSlider>
);
i don't no what to do. Do i need to map them? I am beginner so any help is welcome.

Answer 1

Try this..
const YachtDetails: React.FC<Props> = ({ match }) => {
// here im just spreading/pushing the object in an array, so it will make use
// of the `find` method which is an array method.
const newYachtData = [{...YachtDetailsData}]
const yachtData = newYachtData.find(
(yacht) => parseInt(yacht.id) === match.params.id
);
const slider = (
<AwesomeSlider>
<div>
{yachtData?.image.map((image, key) => (
<div key={key}>
<img src={image} alt="" />
</div>
))}
</div>
</AwesomeSlider>
);
};