Expected Corresponding Jsx Closing Tag for Input Reactjs

Expected corresponding JSX closing tag for input Reactjs

You need to close the input element with a /> at the end.

<input id="icon_prefix" type="text" class="validate" />

React Syntax Error : Expected corresponding JSX closing tag for <img>

You need to close your img tag with a closing />:

<img src={this.props.user.img} alt="logo" />

JSX is not as lenient as HTML when it comes to properly closing tags.

React - Parsing error: Expected corresponding JSX closing tag for <input>

You will need to close the input tag:

<input ...props />

Since you write JSX in the react component and not actual HTML, this is one of the anomaly you've to deal with :/

React Js :Syntax Error: Expected corresponding JSX closing tag

You had some closing tag issue, check if this solves your problem

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;

Expected Corresponding JSX closing error

All tags need to be closed: Self-closing tags

You need a / in your <br> and <img> tags.

<br />
<img src="images/small-blue.png" />

SyntaxError: Expected corresponding JSX closing tag for <a>. Line (17:9)

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

Read https://reactjs.org/docs/dom-elements.html#style

Parsing error: Expected corresponding JSX closing tag for <CCol>

VS Code provides Format on save feature. If you disable that feature your code will not change.

The solution is to press Ctrl Shift + P and search "Open Setting UI". In the open setting UI Search "Format On Save" now you have to just uncheck the checkbox and your problem will solve.

Parsing error: Expected corresponding JSX closing tag for <Route>?

You forgot the closing tag after the children of "About" route.

<Router>
<Switch>
<Route exact path="/">
{create_page(<Home />)}
</Route>

<Route path="/home">
{create_page(<Home />)}
</Route>

<Route path="/about">
{create_page(<About />)}
</Route> Here is the missing closing tag.

<Route path="/home">
{create_page(<Home />)}
</Route>

<Route path="/car">
{create_page(<Car />)}
</Route>
</Switch>
</Router>

SyntaxError: Expected corresponding JSX closing tag for <input>

You have error with input elements:

<input type="password" name="psw" required>

Replace all input elements like this:

<input type="password" name="psw" required />
// ---------- self closing tag ------------^

In normal html you can code the input elements without self closing tag because the browsers handle them while rendering. But JSX doesn't understand the element which has no closing tag.

Be careful with other replaced elements as well. Whenever, you need to use them, you need to have closing tag.



Related Topics



Leave a reply



Submit