React, kalla på objekt?
Tjena gänget! Sitter med en applikation där jag håller på att skapa en Webshop. Just nu håller jag på med produktbeskrivning.
Jag vill kalla på objekten som jag har lagt in, men sitter fast när det handlar om att skriva ut produktens namn.
Objekten ser ut såhär:
const products = [
{
id: 1,
rating: 5,
reviews: [],
price: 1200,
countInStock: 4,
name: "ZEBRONICS Zeb-Yoga 101 Bluetooth Headset (Red, In Ear)",
category: "KATEGORI",
image:
"BILDADDRESS",
description:
" INFORMATION OM PRODUKTEN TAR BORT FÖR TYDLIGHET",
},
Så fortsätter det med några fler
Såhär ser produktbeskrivningssidan ut, jag vill att det ska matcha med id, får fram det med useParams efter lite googling, vet inte vad metoden gör egentligen. Dock får jag inte fram namnet här, tror jag hämtar det på fel sätt.
import React from "react";
import { useParams } from "react-router-dom";
import products from "../products";
export default function Productdescscreen() {
const params = useParams();
const name = products.find((name) => name.id === params.id);
return (
<div>
<h1>Product description</h1>
<h1>Product id: {params.id}</h1>
<h1>Product name: {name.name}</h1>
</div>
);
}
Jag såg en annan lösning efter googling men den fungera inte utan useParams rekomenderades istället. Men den såg ut såhär om det kanske kan hjälpa än mer(NOTERA ATT KODEN OVANFÖR ÄR DEN JAG ANVÄNDER)
import React from "react";
import { useParams } from "react-router-dom";
import products from "../products";
export default function Productdescscreen({match}) {
const productid= match.params.id;
const product= products.find((product) => product.id === productid);
return (
<div>
<h1>Product description</h1>
<h1>Product id: {productid}</h1>
<h1>Product name: {product.name}</h1>
</div>
);
}
Några tips på hur jag kan få fram objekt namnen?
