'Nextjs: Objects are not valid as a React child (found: object with keys {...})

I'm building a form with multiple pages, but my button to toggle the page throws an error.

Objects are not valid as a React child (found: object with keys {0, 1, 2})

const RegisterPage = ()=> {
    const [formPage, setFormPage] = useState(0)

    return (
        <div>
            {formPage == 0 &&
                <div>
                    <button onClick={()=> {setFormPage((c)=> c + 1)}}>Next</button>
                </div>
            }
            {formPage == 1 &&
                <div>
                    <button onClick={()=> {setFormPage((c)=> c - 1)}}>Back</button>
                </div>
            }
        </div>
    );

}

export default RegisterPage;

I have a different element with kind of the same mechanic and it works just fine:

<div className="icon" onClick={()=> {setPwVisible(true); setPwType("text")}}>

I already did some research but I couldn't get it fixed. What am I missing here? Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source