javascript - Error: error: Expected ',', got 'className' in nextjs

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

Share Improve this question edited Jan 5, 2022 at 16:56 asked Jan 5, 2022 at 16:48 vaidik Gupta 451 gold badge1 silver badge6 bronze badges

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

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

ReactJS doesn't allow 2 parent elements, make sure to use a div as parent element

return (
    <div>
        <Head>
            ...
        </Head> 
        <form> 
            ...
        </form> 
    </div>
 )

Programmer puzzle solving

javascript - Error: error: Expected ',', got 'className' in nextjs - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)