button onClick not working in React JS when trying to show inputs and buttons

I was just building a new React App while using bootstrap and react router. I have done it many times. I wanted to show a search input and button for my code. There would be two search inputs and buttons when clicked on any of the two buttons in the Navbar. I used display style to do that. The inputs and buttons are two each. Only one can be shown at a time, as per the button clicked on the Navbar. They both are in the same position though. So, I used onclick and run a funtion which changed their styles. But my onclick was triggering automatically, So I added an e.preventDefault(); After that I tried to click on any one button on the Navbar but onclick didnt work. I failed. Please Help. The Navbar Code:

import { Link } from 'react-router-dom'

function Navbar() {
    let urstyle = {display: 'none'};
    let vrstyle= {display: 'none'};    

    const userReports = (e)=>{
        e.preventDefault()
        console.log("HELLO1")
        urstyle = {display: 'flex'}
        vrstyle = {display: 'none'}
    }

    const vacancyReports = (e)=>{
        e.preventDefault()
        console.log("HELLO2")
        vrstyle = {display: 'flex'}
        urstyle = {display: 'none'}
    }

    return (
        <>
            <nav className="navbar navbar-expand-lg bg-body-tertiary">
                <div className="container-fluid">
                    <Link className="navbar-brand" to="/">Data</Link>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                            <li className="nav-item">
                                <Link className="nav-link active" aria-current="page" to="/">Home</Link>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href='#' onClick={() => userReports}>User Reports</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href='#' onClick={() => vacancyReports}>Vacancy Reports</a>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" aria-current="page" to="/">Create User</Link>

                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" aria-current="page" to="/">Add Vacancy</Link>

                            </li>
                        </ul>
                        <form id="ureports" style={urstyle}>
                            {/* Add select by adding connection to the database */}
                            <button className="btn btn-outline-success" type="submit">Search1</button>
                        </form>
                        <form id="vreports" style={vrstyle}>
                            {/* Add select by adding connection to the database */}
                            <button className="btn btn-outline-success" type="submit">Search2</button>
                        </form>
                    </div>
                </div>
            </nav>
        </>
    )
}

export default Navbar

Solution

First, you have a typo when trying to call your function:

onClick={() => userReports}

To call a function in JavaScript, you need to add parentheses to the end of the function name:

onClick={() => userReports()}

Alternatively, if any arguments passed to the function don't matter in this case, you can just pass the function reference itself to the handler rather than wrap it in an anonymous function:

onClick={userReports}

Aside from that, updating these variables won't do anything useful:

urstyle = {display: 'flex'}
vrstyle = {display: 'none'}

You've missed a core fundamental concept in React from whatever tutorial(s) you've been using... state. Updating state values triggers a re-render. For example...

Import the state hook:

import { useState } from 'react';

Then in your component, replace your variables with state values:

const [urstyle, setUrstyle] = useState({display: 'none'});
const [vrstyle, setVrstyle] = useState({display: 'none'});

Then in your functions, replace direct variable updates with state updates:

setUrstyle({display: 'flex'});
setVrstyle({display: 'none'});

You could probably even simplify it by keeping just a boolean value in state which indicates to display one element or the other. I'll leave refactorings as an exercise for the reader. The main point here is to rely on state rather than directly updating variable values in React.