I'm building a simple online shop in react. It doesn't connect to any api and database for testing. I have array data that displays items on the homepage. When a visitor clicks the buy button on the item they want, the data, like name, price, and quantity should post to the cart. I'm wondering how to do that in react--how to send data to another component.This is my homepage screenshot and this is my cart screenshot. When i click 'beli'(buy) button in homepage it sends data to table in keranjang belanja page (cart).
This is my homepage.js
let barang = [{
"id" : "001",
"nama_barang" : "bolu kuwuk",
"harga" : 10000,
"gambar" : bolukuwuk
},
{
"id" : "002",
"nama_barang" : "bolu kering",
"harga" : 12000,
"gambar" : bolukering
},
{
"id" : "003",
"nama_barang" : "Widaran",
"harga" : 10000,
"gambar" : widaran
},
{
"id" : "004",
"nama_barang" : "Keciput",
"harga" : 10000,
"gambar" : keciput
}
];
class Homepage extends Component {
constructor(props) {
super(props)
this.state = {
json: [],
search: '',
}
}
componentDidMount() {
this.setState((prevState) => {
return {
json: barang
}
})
}
render() {
let filteredJson = this.state.json.filter(
(data) => {
return data.nama_barang.toLowerCase().indexOf(
this.state.search.toLocaleLowerCase()) !== -1
}
);
return (
<div>
<div className="field has-addons">
<div className="control">
<input
className="input"
type="text"
value={this.state.search}
onChange={this.updateSearch.bind(this)}
placeholder="Cari Barang . . . "
/>
</div>
<div className="control">
<a className="button is-info">
<i className="fa fa-search"></i>
</a>
</div>
</div>
<section className="products">
{filteredJson.map((data, i) => {
return (
<div className="product-card" key={i}>
<div className="product-image">
<img src={ data.gambar }/>
</div>
<div className="product-info">
<h5>{data.nama_barang}</h5>
<h6>{data.harga}</h6>
<p>Masukkan Jumlah yang dibeli : </p><input type="number" name="jumlah" onChange={ this.handleChange } /><br/><br/>
<button className="button is-success btn-product" onClick={this.handleSubmit}><i className="fa fa-shopping-cart"></i> Beli</button>
</div>
</div>);
})}
</section>
And this is my cart.js
class cart extends Component{
handleDelete(id) {
}
render (){
return (
<table id="cart" className="table table-hover table-condensed">
<thead>
<tr>
<th styles="width:50%" className="text-center">Nama Produk</th>
<th styles="width:10%" className="text-center">Harga</th>
<th styles="width:8%" className="text-center">Jumlah</th>
<th styles="width:22%" className="text-center">Subtotal</th>
<th styles="width:10%" className="text-center">Action</th>
</tr>
</thead>
<tbody>
{this.state.json.map((data, i) => {
var subtotal = data.harga*data.jumlah;
const id = data.id;
return (
<tr key={i}>
<td data-th="Product">
<div className="row">
<div className="col-sm-10">
<h4 className="nomargin">{data.nama_barang}</h4>
</div>
</div>
</td>
<td data-th="Price">Rp.{data.harga}</td>
<td data-th="Quantity">{data.jumlah} </td>
<td data-th="Subtotal" className="text-center">Rp.{subtotal}</td>
<td className="actions" data-th="">
<button onClick={ () => this.handleDelete(id) } className="button is-danger"><i className="fa fa-trash-o"></i></button>
</td>
</tr>);
})}
</tbody>
<tfoot>
<tr>
<td><Link to ="/" className="button is-warning"><i className="fa fa-angle-left"></i> Lanjut Berbelanja</Link></td>
<td></td>
<td>Total </td>
<td className="hidden-xs text-center"><strong>Rp. { total }</strong></td>
<td>{/*<Link to ="/transaksi" className="button is-success">Checkout <i className="fa fa-angle-right"></i></Link>*/}</td>
</tr>
</tfoot>
</table>
);
}
}
