Dodawanie produktu do koszyka (state)

Question

Witam,

 

Piszę prostą aplikację w ramach nauki React. Chciałbym, aby po kliknięciu w nazwę książki była ona dodawana do koszyka. 

a) W jaki sposób dodać do stanu inne atrybuty, np. identificator. O ile atrybut title mogę dodać bez problemu, o tyle pozostałych, takich jak identificator, czy author już nie.

newProduct = {
        title: e.target.title
          }      

b) Produkt faktycznie dodaje się do koszyka, ale staje się on tablicą, która dzieli tytuł na litery. Próbowałem zmienić zapis 

      let chart =[...this.state.chart];

na 

      let chart ={...this.state.chart};

ale wówczas po klikniętu pokazuje się pusta strona. 

 

Pełen kod: https://codepen.io/Bakr1/pen/bxdgBg

Comments

Sam wymuszasz dodanie tytułu jako tablicy:
Zamiast 

let newProducts = [...this.state.product.title];  

po prostu 

let newProducts = this.state.product.title;

 

Answer 1

Co do dodawania id, to zamiast tablicy stringow zrob tablice obiektow.

ps. w react nie ma czegos takiego jak class. Zamieniamy to na className.

Dodanie nowego produktu do koszyka:

 

this.state = {
chart: [],
}

this.setState({
chart = [....this.state.chart, NOWYPRODUKT]
})

 

Comments

To właśnie powoduje, że koszyk ma w sobie tablice z podzielonymi tytułami na litery:

---

Bo sam sie gubisz w tym co napisałeś. Zrób sobie consol.logi na tej funckji add i zobacz co tam wyprawiasz i co pobierasz. 

const newProducts = [...this.state.product.title].join('');  

to zalatwi sprawe, ale sam kod nie jest ok.

    add = (e) => {
      e.preventDefault();
      const { title } = e.target 
      const newProduct = {
        title
      }   
      
      this.setState({
        product: newProduct,
        chart: [...this.state.chart, title]

      })
    }

O to chodzi ?

---

Mogę też dodać obiekt do tablicy, tak, aby w chart poza tytułem były też inne właściwości?

Po zmianie na chart: [...this.state.chart, newProduct] po kliknięciu pojawia się pusta strona.