Sunday, June 5, 2022

Customer List | HackerRank Certification | React


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

function CustomerList(){
    const[customer, setCustomer] = useState("");
    const[customers, setCustomers] = useState([]);

    const handleSubmit = e => {
        e.preventDefault();
        if(customers.length === 0)
            return;
        setCustomers([...customers,
            {name:customer, count:customer.length}]);
        setCustomer("");
    }

    let rendered = "";

    if(customer.length !== 0){
        rendered = <ul className="styled mt-50"
                        data-testid="customer-list">
                        {customers && customers.map(cus => {
                         return(
                           <li className="slide-up-fade-in"
                            data-testid={"list-item"+cus.count}
                            key={"list-item"+cus.count}>
                            {cus.name}
                           </li>
                         )
                        })}
                    </ul>
    }

    return(
        <div className="mt-75 layout-column
            justify-content-center
            align-items-center">
            <section className="layout-row
                align-items-center
                justify-content-center">
                <input type="text"
                    className="large"
                    placeholder="Name" data-testid="app-input"
                    value={customer}
                    onChange={e => setCustomer(e.target.value)} />
                <button type="submit"
                    className="ml-30"
                    data-testid="submit-button"
                    onClick={handleSubmit}>
                    Add Customer
                </button>
            </section>
            {rendered}
        </div>
    );
}


export default CustomerList

1 comment:

horizontal ads