Wyświetlenie pojedynczego produktu React

Question

Witam, próbuję wyświetli pojedyczne dane tablicy z pliku JSON. Na stronie głównej wyświetliłem wszystkie elementy za pomocą `.map()`. Po kliknięciu na element link przenosi nas do innej podstrony `/products/1` dla pierwszego elementu. W tym momencie chce żeby pokazywały się tylko elementy tego obiektu.

To jest kod pojedynczego elementu:

import React from 'react';
import styles from './SingleProduct.module.scss';
import db from '../../../db.json'

const productData = db.products;
const findId = productData.find((item) => item.id === productData.id);

const showElement = (element) => {
  if(findId){
    return element;
  }
}

class SingleProduct extends React.Component {
  
  render(){
    return (
      <div className={styles.root}>
        <div className={styles.item}>
          <div className={styles.product_images}>
            {showElement(this.props.image)}
          </div>
        </div>
        <div className={styles.item}></div>
        <div className={styles.item}>
          
        </div>
      </div>
    );
  }
};

export default SingleProduct;

To jest baza danych: 

{
    "categories": ["Women", "Men", "Kids"],
  
    "products": [
      {
        "id": "1",
        "name": "Apollo Running Short",
        "category": "Women",
        "price": 50,
        "image": "./images/women/women-1.jpg"
      },
      {
        "id": "2",
        "name": "Apollo Running Short",
        "category": "Women",
        "price": 50,
        "image": "./images/women/women-2.jpg"
      },
      {
        "id": "3",
        "name": "Apollo Running Short",
        "category": "Women",
        "price": 50,
        "image": "./images/women/women-3.jpg"
      },
      {
        "id": "4",
        "name": "Apollo Running Short",
        "category": "Women",
        "price": 50,
        "image": "./images/women/women-4.jpg"
      },
      {
        "id": "5",
        "name": "Apollo Running Short",
        "category": "Women",
        "price": 50,
        "image": "./images/women/women-5.jpg"
      },
      {
        "id": "6",
        "name": "Apollo Running Short",
        "category": "Women",
        "price": 50,
        "image": "./images/women/women-6.jpg"
      }
    ]
}

 

Answer 1

 {showElement(this.props.image)}

co jest podawane jako this.props? Czy dokładnie podawana jest tablica products? co przekazujesz, bo nie ma calego kodu aktualnie, bo wyglada na to jakbys przekazywal wybrany element z tablicy products

const findId = productData.find((item) => item.id === productData.id);

find zwraca obiekt caly, a nie id, lub undefined jesli nie ma.
Wiec w aktualnym stanie nie jestem wstanie odp. na pytanie gdyż nie widze jak przekazujesz prop do komponentu 

<TwojComponent image = "co_tutaj_przekazujesz?" />

 

Comments

Spróbowałem to zrobić, jednak nie do końca chyba rozumiem to co się stało, ponieważ pojawił się błąd `Cannot read properties of undefined (reading 'props')`

import React from 'react';
import styles from './SingleProduct.module.scss';
import db from '../../../db.json';

const productData = db.products;
const findId = productData.find((item) => item.id === productData.id);

const {id,name,category,price,image} = {...this.props};

const showElement = (element) => {
  if(findId){
    return element;
  }
}

class SingleProduct extends React.Component {
  
  render(){
    return (
      <div className={styles.root}>
        <div className={styles.item}>
         {showElement(image)}
        </div>
        <div className={styles.item}></div>
        <div className={styles.item}>
        </div>
      </div>
    );
  }
};

export default SingleProduct;

Wykorzystałem tylko imagine, ale mimo wszystko pojawia mi się błąd, że nie zostało to zdefiniowane. Czy mógłbym prosić, abyś mi to wyjaśnił?

---

const {id,name,category,price,image} = {...this.props};

to jest po za komponentem, a props sa elementami komponentu 
napisz to wewnąrz klasy, przed funkcja render, to jest własność elementu/komponentu a props to nie jest globalna zmienna 

---

@Wiciorny, 

Napisałem według instrukcji, nie mam pojęcia dlaczego stała `findId` jest niezdefiniowana. Błąd się nie pojawia ale obrazek również
https://gist.github.com/sicArchitect/01c679398b33bed6dcd28223de287c8c

---

jak napisałem niżej spróbuj mapować tablice jeśli będą problemy, napisz, pomożemy.

---

Dobrze, tego też użyję :D

Answer 2

const findId = productData.find((item) => item === productData.id);

To nie zadziała. Porównujesz obiekt z undefined. Jeżeli chcesz uzyskać element o konkretnym id musisz porównać np.

item.id === "1"

productData.id to undefined ponieważ const productData = db.products; to tablica obiektów, która nie posiada właściwości id.

Comments

nie porównuje tam obiektu, a jego wlasciwosc id, niemniej jednak.. nie wiem co siedzi w obiekcie i jak wyglada struktura
 

const findId = productData.find((item) => item.id === productData.id);

Co prawda to po nazewnictwie sie zgodze niemniej jednak, products- u kolegi chociaż liczba mnoiga to dalej 1 obiekt, wiec moze to co laduje z dany mimo liczby mnogiej nie jest tablica a pojedynczym obiektem z wlasnoscia id, gdyby to byla tablica - linter zwrocilby blad, ze nie istnieje id dla tego elementu 
Poprzez np. Typescript : Property does not exist on type....

---

To była odpowiedź dla @Sic, który dodał komentarz z linkiem https://gist.github.com/sicArchitect/01c679398b33bed6dcd28223de287c8c

Powinienem ją dodać jako komentarz. Nie mniej jednak

productData.id to undefined ponieważ const productData = db.products; to tablica obiektów, która nie posiada właściwości id.

Struktura danych jest podana w zapytaniu autora.

 

 

---

@Wiciorny, 
Poprzez nazewnictwo chciałem to zrobić odnieść się do id. Typescript nie mogę użyć. Niestety skupić się muszę na React z class component tylko front. użycie JSON wydawało się łatwym rozwiązaniem to pokazania, wszystkich produktów za pomocą tego id próbowałem w nowym linku wyświetlić pojedynczy produkt

---

@pablo76,
Dziękuję, teraz widzę to odrobinę inaczej. Jednak musi istnieć jakiś sposób, aby wywołać pojedynczy element tej tablicy.

---

Tak jak napisałem. 

const findId = productData.find((item) => item.id === zmienna);

"zmienna", czyli id jakiego szukasz i jeżeli istnieje element w tablicy o takim id dostajesz go w zmiennej findId.

---

@Sic, mozesz tablice obiektów zmapować na tablice ich id ... np 

productsIDs = products.map(product => product.id);

a potem porównywać filtrowaniem. 
inaczej.
 

const findId = productData.map(product=> product.id).find((productId) => product.id === zmienna.id);

 

---

@pablop76, 
Dziękuję tak zrobię.