Checkout system using functional component in React JS | JS, TS, React and Angular Forum
J
 JYOTI SHARMA Posted on 18/02/2022

Basic Checkout System:

 

Therevare two sections:

- Left side, there will be list of items like Books,Fruits etc. in radio button 
- Each item will have a drop down of number of items to be purchased and price of all item is 1$
- Right side there will be Order total pannel which will show the total order quantity and the price

 

Note: I tried as given below (https://codesandbox.io/s/strange-sky-3lk4c1?file=/src/Checkout.js:0-979):

 

import React, { useState } from "react";
import Summary from "./Summary";

export default function Checkout() {
constinitialValues=[
{
id: 1,
label: "Books",
value: 1,
price: 1
},
{
id: 1,
label: "Fruits",
value: 2,
price: 1
}
];
const[item, setItem] =useState(initialValues);

consthandleClick=(e)=>{
console.log(e.target.value);
};
return(
<>
<div className="left-section">
{item.map((list) => (
<div>
<span>{list.label}</span>
<span>
{/* <select options={initialValues} /> */}
<select id={list.id} onChange={handleClick}>
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
</select>
</span>
</div>
))}
</div>
<div className="right-section"></div>
</>
);
}

Y

Instructor

Yogesh Chawla Replied on 27/02/2022

I saw this today only.  Use this to calculate total of all items. To use jQuery in react to show drop down from 1 to 100 for Books or Fruits etc. You need to add jquery in your env.

Run this in VS:

npm install jquery --save

then we can import $ from "jquery" in react.

import React from "react";
import ReactDOM from "react-dom";
import $ from "jquery";

class App extends React.Component {
  state = {
    products: [
      { title: "Books", count: 0, price: 1 },
      { title: "Fruits", count: 0, price: 1 },
      { title: "Pen", count: 0, price: 1 },
    ],
  };

  onChange = (index, val) => {
    this.setState({
      products: this.state.products.map((product, i) =>
        i === index ? { ...product, count: val } : product
      ),
    });
  };

  render() {
    return (
      <>
        <>
          <ProductList
            products={this.state.products}
            onChange={this.onChange}
          />
        </>
        <>
          <Total products={this.state.products} />
        </>
      </>
    );
  }
}

const ProductList = ({ products, onChange }) => (
  <ul>
    {products.map((product, i) => (
      <li key={i}>
        {product.title}
        <select
          class="1-100"
          value={product.count}
          onChange={(e) => onChange(i, parseInt(e.target.value) || 0)}
        />
      </li>
    ))}
  </ul>
);

const Total = ({ products }) => (
  <h3>
    Order Total and Price:
    {products.reduce((sum, i) => (sum += i.count * i.price), 0)}
  </h3>
);

ReactDOM.render(<App />, document.querySelector("#root"));

$(function () {
  var $select = $(".1-100");
  for (var i = 0; i <= 100; i++) {
    $select.append($("<option></option>").val(i).html(i));
  }
});