How to display the names of items in the cart?

Need in a particular field to bring all the names of items added to the cart, however, all items appear in one li, help!

Items.jsx (parent component)

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}/">
)
}
</item></div>
</section>
</cart></div>
);
}
}
export default Items;

Item.jsx(a component unit of the commodity)

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">read more</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(actually, the component of the basket)

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">
 the <ul>{title.map((n, i) =>
 <li key="{i}" classname="item">{n}</li> 
)}</ul>
</div>
 <button classname="btn_submit">Submit</button>
</div>
</div>
 </aside> 
);
}
}