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
How to Write an Onclick Function for a Dynamically Generated Button
How to Mute Video With JavaScript or Jquery
Refresh Leaflet Map: Map Container Is Already Initialized
Looping Through a Json Object Containing More Objects and Arrays
How to Wait for Element to Disappear in Cypress
Jquery Click Events Firing Multiple Times
Reactjs: Expected Onclick Listener to Be a Function, Instead Got Type String
How to Count the Entire Number of Rows in a Datatable
Download Image as File in Typescript
How to Clear All Input Fields in Bootstrap Modal When Clicking Data-Dismiss Button
Node.Js MySQL Query in a for Loop
What Is the Purpose of the Dollar Sign in JavaScript
Alphanumeric, Dash and Underscore But No Spaces Regular Expression Check JavaScript
React: How to Inject React Component into Body
How Insert JavaScript into Vue File
How to Create a Dynamic Jquery Data Table With Json Data and Ajax