React Js :Syntax Error: Expected corresponding JSX closing tag
React Js :Syntax Error: Expected corresponding JSX closing tag
我是 ReactJS 的初学者，我想尝试 youtube.I 上的发票应用程序教程，我遇到了看似微不足道的错误，但我看不出错误在哪里。
错误信息
“模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：
SyntaxError: C:\Users\ADS\Desktop\invoicerv2\invoicer\src\App.js: 预期相应的 JSX 结束标记为 ".
代码
import React,{useState} from "react";
import Table from "./components/Table";
import Footer from "./components/Footer";
import Notes from "./components/Notes";
import MainDetails from "./components/MainDetails";
import ClientDetails from "./components/ClientDetails";
import Dates from "./components/Dates";
import Header from "./components/Header";
import TableForm from "./components/TableForm";
function App() {
//create a state value called show invoice and
const[showInvoice,setShowInvoice]= useState(false)
const[name,setName]= useState("")
const[address,setAddress]= useState("")
const[email,setEmail]= useState("")
const[phone,setPhone]= useState("")
const[website,setWebsite]= useState("")
const[clientName,setClientName]= useState("")
const[clientAddress,setClientAddress]= useState("")
const[invoiceNumber,setInvoiceNumber]= useState("")
const[invoiceDate,setInvoiceDate]= useState("")
const[dueDate,setDueDate]= useState("")
const[notes,setNotes]= useState("")
const [description,setDescription]=useState("")
const [quantity,setQuantity]=useState("")
const [price,setPrice]=useState("")
const [amount,setAmount]=useState("")
const [list,setList]=useState([])
// calculate the total of amountfor the products
const [total,setTotal]=useState(0)
// create a prop called handle print
const handlePrint = () => {window.print()}
return (
<>
<main className="m-5 p-5 md:max-w-xl lg:max-w-2xl xl:max-w-4xl md:mx-auto xl:max-w-
4xl bg-white rounded shadow">
{showInvoice ? (
<div>
{/* Header */}
<Header handlePrint={handlePrint} />
{/* Your details */}
<MainDetails name={name} address={address} />
{/* Client details */}
<ClientDetails
clientName={clientName}
clientAddress={clientAddress}/>
{/* Dates */}
<Dates
invoiceNumber={invoiceNumber}
invoiceDate={invoiceDate}
dueDate={dueDate}/>
{/* Table */}
<Table
description={description}
quantity={quantity}
price={price}
amount={amount}
list={list}
setList={setList}
total={total}
setTotal={setTotal} />
<Notes notes={notes}/>
<Footer
name={name}
address={address}
website={website}
email={email}
phone={phone} />
<button onClick={()=> setShowInvoice(false)}
className=" mt-5 bg-blue-500 text-white
font-bold py-2 px-8
rounded shadow border-2 border-blue-500
hover:bg-transparent hover:text-blue-500
transition-all duration-300">Edit Information</button>
</div>):(
<>
{/* name, address,email,phone,bank name, bank account number, website,invoice
number,invoice date,due date,notes */}
<div className="flex flex-col justify-center">
<article className="md:grid grid-cols-2 gap-10">
<div className="flex flex-col">
<label htmlFor="name"> Enter your name:</label>
<input
type="text"
name="text "
id="name"
placeholder="Enter your name"
autoComplete="off"
value={name}
onChange={(e)=> setName(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="address">Enter your address:</label>
<input
type="text"
name="address"
id="address"
placeholder="Enter your address"
autoComplete="off"
value={address}
onChange={(e)=> setAddress(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-3 gap-10">
<div className="flex flex-col">
<label htmlFor="email"> Enter your email:</label>
<input
type="email"
name="email "
id="email"
placeholder="Enter your email"
autoComplete="off"
value={email}
onChange={(e)=> setEmail(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="website">Enter your website:</label>
<input
type="url"
name="website "
id="website"
placeholder="Enter your website"
autoComplete="off"
value={website}
onChange={(e)=> setWebsite(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="phone"> Enter your phone:</label>
<input
type="text"
name="phone "
id="phone"
placeholder="Enter your phone"
autoComplete="off"
value={phone}
onChange={(e)=> setPhone(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-2 gap-10">
<div className="flex flex-col">
<label htmlFor="clientName"> Enter your client's name:</label>
<input
type="text"
name="clientName"
id="clientName"
placeholder="Enter your client's name"
autoComplete="off"
value={clientName}
onChange={(e)=> setClientName(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="clientAddress"> Enter your client's address:</label>
<input
type="text"
name="clientAddress"
id="clientAddress"
placeholder="Enter your client's address"
autoComplete="off"
value={clientAddress}
onChange={(e)=> setClientAddress(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-3 gap-10">
<div className="flex flex-col justify-center">
<label htmlFor="invoiceNumber"> Numero de Facture:</label>
<input
type="text"
name="invoiceNumber "
id="invoiceNumber"
placeholder="Enter the invoice number"
autoComplete="off"
value={invoiceNumber}
onChange={(e)=> setInvoiceNumber(e.target.value)} />
</div>
<div className='flex flex-col'>
<label htmlFor="invoiceDate">Date</label>
<input
type="date"
name="invoiceDate "
id="invoiceDate"
placeholder="Enter invoice date"
autoComplete="off"
value={invoiceDate}
onChange={(e)=> setInvoiceDate(e.target.value)} />
</div>
<div>
<label htmlFor="dueDate">Date</label>
<input
type="date"
name="dueDate "
id="invoiceDate"
placeholder="Enter invoice date"
autoComplete="off"
value={invoiceDate}
onChange={(e)=> setDueDate(e.target.value)} /></div>
</div>
{/*There I got the error */}
</article>
{/*This is our table form */}
<article>
<TableForm
description={decription}
setDescription={setDescription}
quantity={quantity}
setQuantity={setQuantity}
price={price}
setPrice={setPrice}
amount={amount}
setAmount={setAmount}
list={list}
setList={setList}
total={total}
setTotal={setTotal}/>
</article>
<label htmlFor="notes">Additional Notes:</label>
<textarea
name="notes"
id="notes"
cols="30"
rows="10"
placeholder="Additional notes to the client"
value={notes}
onChange={(e)=> setNotes(e.target.value)}>
</textarea>
<button onClick={()=> setShowInvoice(true)}
className="bg-blue-500 text-white
font-bold py-2 px-8
rounded shadow border-2 border-blue-500
hover:bg-transparent hover:text-blue-500
transition-all duration-300">Preview Invoice</button>
)
</main>
</>
)
}
export default App;
您遇到了一些结束标记问题，请检查这是否解决了您的问题
import React, {useState} from "react";
import Table from "./components/Table";
import Footer from "./components/Footer";
import Notes from "./components/Notes";
import MainDetails from "./components/MainDetails";
import ClientDetails from "./components/ClientDetails";
import Dates from "./components/Dates";
import Header from "./components/Header";
function App() {
//create a state value called show invoice and
const [showInvoice, setShowInvoice] = useState(false)
const [name, setName] = useState("")
const [address, setAddress] = useState("")
const [email, setEmail] = useState("")
const [phone, setPhone] = useState("")
const [website, setWebsite] = useState("")
const [clientName, setClientName] = useState("")
const [clientAddress, setClientAddress] = useState("")
const [invoiceNumber, setInvoiceNumber] = useState("")
const [invoiceDate, setInvoiceDate] = useState("")
const [dueDate, setDueDate] = useState("")
const [notes, setNotes] = useState("")
const [description, setDescription] = useState("")
const [quantity, setQuantity] = useState("")
const [price, setPrice] = useState("")
const [amount, setAmount] = useState("")
const [list, setList] = useState([])
// calculate the total of amountfor the products
const [total, setTotal] = useState(0)
// create a prop called handle print
const handlePrint = () => {
window.print()
}
return (
<>
<main className="m-5 p-5 md:max-w-xl lg:max-w-2xl xl:max-w-4xl md:mx-auto xl:max-w-
4xl bg-white rounded shadow">
{showInvoice ?
<div>
{/* Header */}
<Header handlePrint={handlePrint}/>
{/* Your details */}
<MainDetails name={name} address={address}/>
{/* Client details */}
<ClientDetails
clientName={clientName}
clientAddress={clientAddress}/>
{/* Dates */}
<Dates
invoiceNumber={invoiceNumber}
invoiceDate={invoiceDate}
dueDate={dueDate}/>
{/* Table */}
<Table
description={description}
quantity={quantity}
price={price}
amount={amount}
list={list}
setList={setList}
total={total}
setTotal={setTotal}/>
<Notes notes={notes}/>
<Footer
name={name}
address={address}
website={website}
email={email}
phone={phone}/>
<button onClick={() => setShowInvoice(false)}
className=" mt-5 bg-blue-500 text-white
font-bold py-2 px-8
rounded shadow border-2 border-blue-500
hover:bg-transparent hover:text-blue-500
transition-all duration-300">Edit Information
</button>
</div> :
<div className="flex flex-col justify-center">
<article className="md:grid grid-cols-2 gap-10">
<div className="flex flex-col">
<label htmlFor="name"> Enter your name:</label>
<input
type="text"
name="text "
id="name"
placeholder="Enter your name"
autoComplete="off"
value={name}
onChange={(e) => setName(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="address">Enter your address:</label>
<input
type="text"
name="address"
id="address"
placeholder="Enter your address"
autoComplete="off"
value={address}
onChange={(e) => setAddress(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-3 gap-10">
<div className="flex flex-col">
<label htmlFor="email"> Enter your email:</label>
<input
type="email"
name="email "
id="email"
placeholder="Enter your email"
autoComplete="off"
value={email}
onChange={(e) => setEmail(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="website">Enter your website:</label>
<input
type="url"
name="website "
id="website"
placeholder="Enter your website"
autoComplete="off"
value={website}
onChange={(e) => setWebsite(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="phone"> Enter your phone:</label>
<input
type="text"
name="phone "
id="phone"
placeholder="Enter your phone"
autoComplete="off"
value={phone}
onChange={(e) => setPhone(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-2 gap-10">
<div className="flex flex-col">
<label htmlFor="clientName"> Enter your client's name:</label>
<input
type="text"
name="clientName"
id="clientName"
placeholder="Enter your client's name"
autoComplete="off"
value={clientName}
onChange={(e) => setClientName(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="clientAddress"> Enter your client's address:</label>
<input
type="text"
name="clientAddress"
id="clientAddress"
placeholder="Enter your client's address"
autoComplete="off"
value={clientAddress}
onChange={(e) => setClientAddress(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-3 gap-10">
<div className="flex flex-col justify-center">
<label htmlFor="invoiceNumber"> Numero de Facture:</label>
<input
type="text"
name="invoiceNumber "
id="invoiceNumber"
placeholder="Enter the invoice number"
autoComplete="off"
value={invoiceNumber}
onChange={(e) => setInvoiceNumber(e.target.value)}/>
</div>
<div className='flex flex-col'>
<label htmlFor="invoiceDate">Date</label>
<input
type="date"
name="invoiceDate "
id="invoiceDate"
placeholder="Enter invoice date"
autoComplete="off"
value={invoiceDate}
onChange={(e) => setInvoiceDate(e.target.value)}/>
</div>
<div>
<label htmlFor="dueDate">Date</label>
<input
type="date"
name="dueDate "
id="invoiceDate"
placeholder="Enter invoice date"
autoComplete="off"
value={invoiceDate}
onChange={(e) => setDueDate(e.target.value)}/></div>
</article>
<article>
<TableForm
designation={designation}
setDesignation={setDesignation}
quantity={quantity}
setQuantity={setQuantity}
price={price}
setPrice={setPrice}
amount={amount}
setAmount={setAmount}
list={list}
setList={setList}
total={total}
setTotal={setTotal}/>
</article>
<label htmlFor="notes">Additional Notes:</label>
<textarea
name="notes"
id="notes"
cols="30"
rows="10"
placeholder="Additional notes to the client"
value={notes}
onChange={(e)=> setNotes(e.target.value)}>
</textarea>
<button onClick={()=> setShowInvoice(true)}
className="bg-blue-500 text-white
font-bold py-2 px-8
rounded shadow border-2 border-blue-500
hover:bg-transparent hover:text-blue-500
transition-all duration-300">Preview Invoice</button>
</div>
}
</main>
</>
)
}
export default App;
我是 ReactJS 的初学者，我想尝试 youtube.I 上的发票应用程序教程，我遇到了看似微不足道的错误，但我看不出错误在哪里。
错误信息
“模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：
SyntaxError: C:\Users\ADS\Desktop\invoicerv2\invoicer\src\App.js: 预期相应的 JSX 结束标记为 ".
代码
import React,{useState} from "react";
import Table from "./components/Table";
import Footer from "./components/Footer";
import Notes from "./components/Notes";
import MainDetails from "./components/MainDetails";
import ClientDetails from "./components/ClientDetails";
import Dates from "./components/Dates";
import Header from "./components/Header";
import TableForm from "./components/TableForm";
function App() {
//create a state value called show invoice and
const[showInvoice,setShowInvoice]= useState(false)
const[name,setName]= useState("")
const[address,setAddress]= useState("")
const[email,setEmail]= useState("")
const[phone,setPhone]= useState("")
const[website,setWebsite]= useState("")
const[clientName,setClientName]= useState("")
const[clientAddress,setClientAddress]= useState("")
const[invoiceNumber,setInvoiceNumber]= useState("")
const[invoiceDate,setInvoiceDate]= useState("")
const[dueDate,setDueDate]= useState("")
const[notes,setNotes]= useState("")
const [description,setDescription]=useState("")
const [quantity,setQuantity]=useState("")
const [price,setPrice]=useState("")
const [amount,setAmount]=useState("")
const [list,setList]=useState([])
// calculate the total of amountfor the products
const [total,setTotal]=useState(0)
// create a prop called handle print
const handlePrint = () => {window.print()}
return (
<>
<main className="m-5 p-5 md:max-w-xl lg:max-w-2xl xl:max-w-4xl md:mx-auto xl:max-w-
4xl bg-white rounded shadow">
{showInvoice ? (
<div>
{/* Header */}
<Header handlePrint={handlePrint} />
{/* Your details */}
<MainDetails name={name} address={address} />
{/* Client details */}
<ClientDetails
clientName={clientName}
clientAddress={clientAddress}/>
{/* Dates */}
<Dates
invoiceNumber={invoiceNumber}
invoiceDate={invoiceDate}
dueDate={dueDate}/>
{/* Table */}
<Table
description={description}
quantity={quantity}
price={price}
amount={amount}
list={list}
setList={setList}
total={total}
setTotal={setTotal} />
<Notes notes={notes}/>
<Footer
name={name}
address={address}
website={website}
email={email}
phone={phone} />
<button onClick={()=> setShowInvoice(false)}
className=" mt-5 bg-blue-500 text-white
font-bold py-2 px-8
rounded shadow border-2 border-blue-500
hover:bg-transparent hover:text-blue-500
transition-all duration-300">Edit Information</button>
</div>):(
<>
{/* name, address,email,phone,bank name, bank account number, website,invoice
number,invoice date,due date,notes */}
<div className="flex flex-col justify-center">
<article className="md:grid grid-cols-2 gap-10">
<div className="flex flex-col">
<label htmlFor="name"> Enter your name:</label>
<input
type="text"
name="text "
id="name"
placeholder="Enter your name"
autoComplete="off"
value={name}
onChange={(e)=> setName(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="address">Enter your address:</label>
<input
type="text"
name="address"
id="address"
placeholder="Enter your address"
autoComplete="off"
value={address}
onChange={(e)=> setAddress(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-3 gap-10">
<div className="flex flex-col">
<label htmlFor="email"> Enter your email:</label>
<input
type="email"
name="email "
id="email"
placeholder="Enter your email"
autoComplete="off"
value={email}
onChange={(e)=> setEmail(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="website">Enter your website:</label>
<input
type="url"
name="website "
id="website"
placeholder="Enter your website"
autoComplete="off"
value={website}
onChange={(e)=> setWebsite(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="phone"> Enter your phone:</label>
<input
type="text"
name="phone "
id="phone"
placeholder="Enter your phone"
autoComplete="off"
value={phone}
onChange={(e)=> setPhone(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-2 gap-10">
<div className="flex flex-col">
<label htmlFor="clientName"> Enter your client's name:</label>
<input
type="text"
name="clientName"
id="clientName"
placeholder="Enter your client's name"
autoComplete="off"
value={clientName}
onChange={(e)=> setClientName(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="clientAddress"> Enter your client's address:</label>
<input
type="text"
name="clientAddress"
id="clientAddress"
placeholder="Enter your client's address"
autoComplete="off"
value={clientAddress}
onChange={(e)=> setClientAddress(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-3 gap-10">
<div className="flex flex-col justify-center">
<label htmlFor="invoiceNumber"> Numero de Facture:</label>
<input
type="text"
name="invoiceNumber "
id="invoiceNumber"
placeholder="Enter the invoice number"
autoComplete="off"
value={invoiceNumber}
onChange={(e)=> setInvoiceNumber(e.target.value)} />
</div>
<div className='flex flex-col'>
<label htmlFor="invoiceDate">Date</label>
<input
type="date"
name="invoiceDate "
id="invoiceDate"
placeholder="Enter invoice date"
autoComplete="off"
value={invoiceDate}
onChange={(e)=> setInvoiceDate(e.target.value)} />
</div>
<div>
<label htmlFor="dueDate">Date</label>
<input
type="date"
name="dueDate "
id="invoiceDate"
placeholder="Enter invoice date"
autoComplete="off"
value={invoiceDate}
onChange={(e)=> setDueDate(e.target.value)} /></div>
</div>
{/*There I got the error */}
</article>
{/*This is our table form */}
<article>
<TableForm
description={decription}
setDescription={setDescription}
quantity={quantity}
setQuantity={setQuantity}
price={price}
setPrice={setPrice}
amount={amount}
setAmount={setAmount}
list={list}
setList={setList}
total={total}
setTotal={setTotal}/>
</article>
<label htmlFor="notes">Additional Notes:</label>
<textarea
name="notes"
id="notes"
cols="30"
rows="10"
placeholder="Additional notes to the client"
value={notes}
onChange={(e)=> setNotes(e.target.value)}>
</textarea>
<button onClick={()=> setShowInvoice(true)}
className="bg-blue-500 text-white
font-bold py-2 px-8
rounded shadow border-2 border-blue-500
hover:bg-transparent hover:text-blue-500
transition-all duration-300">Preview Invoice</button>
)
</main>
</>
)
}
export default App;
您遇到了一些结束标记问题，请检查这是否解决了您的问题
import React, {useState} from "react";
import Table from "./components/Table";
import Footer from "./components/Footer";
import Notes from "./components/Notes";
import MainDetails from "./components/MainDetails";
import ClientDetails from "./components/ClientDetails";
import Dates from "./components/Dates";
import Header from "./components/Header";
function App() {
//create a state value called show invoice and
const [showInvoice, setShowInvoice] = useState(false)
const [name, setName] = useState("")
const [address, setAddress] = useState("")
const [email, setEmail] = useState("")
const [phone, setPhone] = useState("")
const [website, setWebsite] = useState("")
const [clientName, setClientName] = useState("")
const [clientAddress, setClientAddress] = useState("")
const [invoiceNumber, setInvoiceNumber] = useState("")
const [invoiceDate, setInvoiceDate] = useState("")
const [dueDate, setDueDate] = useState("")
const [notes, setNotes] = useState("")
const [description, setDescription] = useState("")
const [quantity, setQuantity] = useState("")
const [price, setPrice] = useState("")
const [amount, setAmount] = useState("")
const [list, setList] = useState([])
// calculate the total of amountfor the products
const [total, setTotal] = useState(0)
// create a prop called handle print
const handlePrint = () => {
window.print()
}
return (
<>
<main className="m-5 p-5 md:max-w-xl lg:max-w-2xl xl:max-w-4xl md:mx-auto xl:max-w-
4xl bg-white rounded shadow">
{showInvoice ?
<div>
{/* Header */}
<Header handlePrint={handlePrint}/>
{/* Your details */}
<MainDetails name={name} address={address}/>
{/* Client details */}
<ClientDetails
clientName={clientName}
clientAddress={clientAddress}/>
{/* Dates */}
<Dates
invoiceNumber={invoiceNumber}
invoiceDate={invoiceDate}
dueDate={dueDate}/>
{/* Table */}
<Table
description={description}
quantity={quantity}
price={price}
amount={amount}
list={list}
setList={setList}
total={total}
setTotal={setTotal}/>
<Notes notes={notes}/>
<Footer
name={name}
address={address}
website={website}
email={email}
phone={phone}/>
<button onClick={() => setShowInvoice(false)}
className=" mt-5 bg-blue-500 text-white
font-bold py-2 px-8
rounded shadow border-2 border-blue-500
hover:bg-transparent hover:text-blue-500
transition-all duration-300">Edit Information
</button>
</div> :
<div className="flex flex-col justify-center">
<article className="md:grid grid-cols-2 gap-10">
<div className="flex flex-col">
<label htmlFor="name"> Enter your name:</label>
<input
type="text"
name="text "
id="name"
placeholder="Enter your name"
autoComplete="off"
value={name}
onChange={(e) => setName(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="address">Enter your address:</label>
<input
type="text"
name="address"
id="address"
placeholder="Enter your address"
autoComplete="off"
value={address}
onChange={(e) => setAddress(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-3 gap-10">
<div className="flex flex-col">
<label htmlFor="email"> Enter your email:</label>
<input
type="email"
name="email "
id="email"
placeholder="Enter your email"
autoComplete="off"
value={email}
onChange={(e) => setEmail(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="website">Enter your website:</label>
<input
type="url"
name="website "
id="website"
placeholder="Enter your website"
autoComplete="off"
value={website}
onChange={(e) => setWebsite(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="phone"> Enter your phone:</label>
<input
type="text"
name="phone "
id="phone"
placeholder="Enter your phone"
autoComplete="off"
value={phone}
onChange={(e) => setPhone(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-2 gap-10">
<div className="flex flex-col">
<label htmlFor="clientName"> Enter your client's name:</label>
<input
type="text"
name="clientName"
id="clientName"
placeholder="Enter your client's name"
autoComplete="off"
value={clientName}
onChange={(e) => setClientName(e.target.value)}/>
</div>
<div className="flex flex-col">
<label htmlFor="clientAddress"> Enter your client's address:</label>
<input
type="text"
name="clientAddress"
id="clientAddress"
placeholder="Enter your client's address"
autoComplete="off"
value={clientAddress}
onChange={(e) => setClientAddress(e.target.value)}/>
</div>
</article>
<article className="md:grid grid-cols-3 gap-10">
<div className="flex flex-col justify-center">
<label htmlFor="invoiceNumber"> Numero de Facture:</label>
<input
type="text"
name="invoiceNumber "
id="invoiceNumber"
placeholder="Enter the invoice number"
autoComplete="off"
value={invoiceNumber}
onChange={(e) => setInvoiceNumber(e.target.value)}/>
</div>
<div className='flex flex-col'>
<label htmlFor="invoiceDate">Date</label>
<input
type="date"
name="invoiceDate "
id="invoiceDate"
placeholder="Enter invoice date"
autoComplete="off"
value={invoiceDate}
onChange={(e) => setInvoiceDate(e.target.value)}/>
</div>
<div>
<label htmlFor="dueDate">Date</label>
<input
type="date"
name="dueDate "
id="invoiceDate"
placeholder="Enter invoice date"
autoComplete="off"
value={invoiceDate}
onChange={(e) => setDueDate(e.target.value)}/></div>
</article>
<article>
<TableForm
designation={designation}
setDesignation={setDesignation}
quantity={quantity}
setQuantity={setQuantity}
price={price}
setPrice={setPrice}
amount={amount}
setAmount={setAmount}
list={list}
setList={setList}
total={total}
setTotal={setTotal}/>
</article>
<label htmlFor="notes">Additional Notes:</label>
<textarea
name="notes"
id="notes"
cols="30"
rows="10"
placeholder="Additional notes to the client"
value={notes}
onChange={(e)=> setNotes(e.target.value)}>
</textarea>
<button onClick={()=> setShowInvoice(true)}
className="bg-blue-500 text-white
font-bold py-2 px-8
rounded shadow border-2 border-blue-500
hover:bg-transparent hover:text-blue-500
transition-all duration-300">Preview Invoice</button>
</div>
}
</main>
</>
)
}
export default App;