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