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