useState redirecting to different component in Next.js

March 9, 2022

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?