Error: error: Expected ',', got 'className' in nextjs
I'm trying to make a sign-in page using bootstrap 4, but it shows above error after piling.
It shows error on 15 line of div tag
return (
<Head>
<title>Sign in</title>
</Head>
<form>
<div className="form-group">
<label for="exampleInputEmail1">Email address</label>
<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div className="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" className="form-control" id="exampleInputPassword1" placeholder="Password" />
</div>
<div className="form-check">
<input type="checkbox" className="form-check-input" id="exampleCheck1" />
<label className="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
)
}
export default signin
Error: error: Expected ',', got 'className' in nextjs
I'm trying to make a sign-in page using bootstrap 4, but it shows above error after piling.
It shows error on 15 line of div tag
return (
<Head>
<title>Sign in</title>
</Head>
<form>
<div className="form-group">
<label for="exampleInputEmail1">Email address</label>
<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div className="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" className="form-control" id="exampleInputPassword1" placeholder="Password" />
</div>
<div className="form-check">
<input type="checkbox" className="form-check-input" id="exampleCheck1" />
<label className="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
)
}
export default signin
- The code provided seems unrelated to the error. – evolutionxbox Commented Jan 5, 2022 at 16:52
- Does this answer your question? React - expressions must have one parent element? – juliomalves Commented Jan 7, 2022 at 18:10
1 Answer
Reset to default 3ReactJS doesn't allow 2 parent elements, make sure to use a div as parent element
return (
<div>
<Head>
...
</Head>
<form>
...
</form>
</div>
)