Как вывести названия товаров в корзине?

Нужно в определённом поле вывести все названия товаров, добавленных в корзину, но происходит так, что все товары выводятся в одном li, помогите!

Items.jsx (родительский компонент)
import React, {Component} from 'react';

import Item from '../components/Item';
import Cart from '../components/Cart';

import '../css/shop.css';
import '../css/keyload.css';

class Items extends Component{
    constructor(props){
        super();
        this.state ={
            price: 0,
            title: []
        };
        this.handleCartPriceChange = this.handleCartPriceChange.bind(this);
}
    handleCartPriceChange(price, title){
        this.setState({ price: this.state.price + price, title: [this.state.title+title]});
    }
    render(){
    return(
        <div className="wrap">
            <Cart title={this.state.title} price={this.state.price} />
            <section className="shop">
                <div className="wrap_container">
                {this.props.items.map(item =>
                     <Item title={item.title} price={item.price} onCartPriceChange={this.handleCartPriceChange} key={item.id} shirt ={item.img}/>
                )
                }
                </div>
            </section>
        </div>
    );
}
}
export default Items;


Item.jsx(компонент единицы товара)
import React, {Component} from 'react';

import Button from './Button';

class Item extends Component{
    constructor(props){
        super(props);
        this.state={
            btn_children: 'ADD'
        };
        this.onCartPriceChange = this.onCartPriceChange.bind(this);
        this.onCartPriceOver = this.onCartPriceOver.bind(this);
    }
    onCartPriceChange(){
        this.setState({ btn_children: this.props.price + '$',
    })
    }
    onCartPriceOver(){
        this.setState({btn_children: 'ADD'})
    }
    render(){
    return(
        <div className="shop__item">
            <img className="item" src={this.props.shirt} alt=""/>
            <div className="title">
                <a href="#" className="descr">подробнее</a>
                <Button onMouseOver={this.onCartPriceChange} onMouseOut={this.onCartPriceOver} onClick={()=> this.props.onCartPriceChange(this.props.price, this.props.title)} className="btn_buy">{this.state.btn_children}</Button>
            </div>
        </div>        
    );
}
}
export default Item;


Cart.jsx(собственно, сам компонент корзины)
import React, {Component} from 'react';

import Button from './Button';

import cart from './img/cart.svg';
export default class Cart extends Component{
    constructor(props){
        super();
    }
    render(){
        var price = this.props.price;
        var title = this.props.title;
        if(price > 2000){
            price = 2000;
        }
        return(
            <aside className="cart">
            <div className="wrapper">
                    <img src={cart} alt=""/>
                    <div className="priceOutput">
                        <span className="price">{`${price ? price+ '$' : 'Add item to cart' }` }</span>
                        <hr/>
                        <div className="cart_history">
                            <ul>{title.map((n, i) =>
                                <li key={i} className="item">{n}</li> 
                            )}</ul>
                        </div>
                        <Button className="btn_submit">Submit</Button>
                    </div>
            </div>
            </aside>            
        );
    }
}
  • Вопрос задан
  • 339 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Метод handleCartPriceChange, замените

this.setState({ price: this.state.price + price, title: [this.state.title+title]});

на

this.setState({
  price: this.state.price + price,
  title: this.state.title.concat(title)
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы