useState redirecting to different component in Next.js

Question

I'm using useState in Next.js to render different components based on which button the user clicks. Here's the main page's (called account.js in the app) code:

//getting components and importing react
import react from 'react'

const account = () => {
    const [active, setActive] = react.useState("general")
    return (
        <>
            <div className="container my-5">
                <div className="container text-center mb-3">
                    <button onClick={() => setActive("general")} className="btn btn-primary btn-lg mx-3">General Information</button>
                    <button onClick={() => setActive("education")} className="btn btn-primary btn-lg mx-3">Education History</button>
                    <button onClick={() => setActive("tests")} className="btn btn-primary btn-lg mx-3">Test Scores</button>
                    <button onClick={() => setActive("background")} className="btn btn-primary btn-lg mx-3">Background information</button>
                    <button onClick={() => setActive("documents")} className="btn btn-primary btn-lg mx-3">Upload documents</button>
                </div>
            </div>

            <div className="container my-5">
                {
                    active === "zero" && <p className='text-center'>Select a field to start</p>
                }
                {
                    active === "general" && <General></General>
                }
                {
                    active === "education" && <Education></Education>
                }
                {
                    active === "tests" && <Tests></Tests>
                }
                {
                    active === "background" && <Background></Background>
                }
                {
                    active === "documents" && <Documents></Documents>
                }
            </div>
        </>
    )
}

export default account

Now one of these components, namely Education.js also has a button that when clicked, will show a different component, AddSchool.js. The problem is, when I use useState in Education.js, while it does show the component I want it to when the button is clicked, it redirects back to the first page (account.js) where I used useState.

Code for Education.js:

import AddSchool from './AddSchool.js'
import react from 'react'


const Education = () => {
    const [schoolerActive, schoolActive] = react.useState("noSchool")

    return (
        <form action="">
            {/* Some stuff here */}
                        <div>
                <button onClick={() => schoolActive("schooler")} className='btn btn-warning'>Add Schools +</button>
                {
                    schoolerActive === "noSchool" && <></>
                }
                {
                    schoolerActive === "schooler" && <AddSchool />
                }
            </div>
        </form>
    )
}

export default Education

I'm expecting that when I click the 'Add Schools +' button, it just renders the AddSchool.js component. What it does instead is renders the AddSchool.js component exactly like I want but then redirects to account.js for some reason.

Can someone point out what I'm getting wrong here?

Answer 1

As the other answer mentioned, you need to add a type attribute to specify that a button is a button inside a form.

In HTML, if you put a button inside a form and there's no <input type="button" />, then that will automatically act as the submit button.

To fix this issue simply add type="button" to your button element; that way it won't submit the form unexpectedly.

<button type="submit" onClick={() => {...}}>...</button>

Answer 2

A button without a type property in a form automatically submits the form causing the location of the page to change.