useState redirecting to different component in Next.js-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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>