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

Question

[Владислав]

Нужно в определённом поле вывести все названия товаров, добавленных в корзину, но происходит так, что все товары выводятся в одном 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>            
        );
    }
}

Comments

[ой всё]

вот они прогрессивные технологии во всей красе :)

[ой всё]

Райнур Дильмухаметов, как при том, что они слишком messy и создают сложности там, где их нет по определению

что может быть проще, чем цикл по одному индексу для одного компонента интерфейса?

но нельзя так просто написать простой цикл, нужно писать целый комбайн ))

[ой всё]

Райнур Дильмухаметов, не работайте с DOM, работайте с объектами в json
jquery реализует кроссбраузерность, и все что вам нужно от него это поиск объектов по id и append некоторого кода для динамических данных

работается там, где не хотят зависеть от чужих технологий

[ой всё]

Райнур Дильмухаметов, дружок, я работаю в таких проекта, о существовании которых ты даже не подозреваешь :)
если ты отстал от жизни, это не значит, что твое видение мира единственно правильное

то, что ты до сих пор киваешь в сторону java и andriod, только подтверждает, что ты понятия не имеешь, что даже самые богатые компании мира сегодня уже не хотят поддерживать приложения для разных платформ, а переходят на SPA, которые прекрасно обходятся без java, и все что сегодня делают java разработчики - это 24/7 support того говна, что они сами же раньше и написали, у меня таких по соседству десяток сидит и все недовольны, что проекты для них закончились :)

про облака даже и упоминать не буду, вряд ли ты слышал такое слово

и запомни на будущее, в русском языке к незнакомым людям принято вежливо обращаться на "вы", а не фамильярно тыкать и хамить

[Владислав]

ой всё,@rainur102, хватит разводить срач! Мне всего лишь нужна была помощь, а не 500+ всратых комментариев под моим вопросом

[ой всё]

Vladislav, ну в таком тоне вы вряд ли ее получите
изучайте программирование с нуля, привыкайте к долгим часам отладки, отращивайте дзэн и будет вам счастье

а с такими нервами, как у вас, в программировании делать нечего

Answer 1

[0xD34F]

Метод 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)
});

Comments

[Владислав]

Спасибо!