Question 51510 in Javascript Question posted in
A very good W3school tutorial can be found here.

Event listener not reacting according to button push – Javascript

I am currently trying to fix a timing issue with my Javscript REACT bootstrap code. This is what I am wanting:
I will have a button that when clicked, will call a function that will alter a variable to "open," otherwise it is closed. Then, depending on that variable’s function, a specific element will be put on the webpage.

When I do this, only the first option shows. I want it to be "closed" until the button is clicked. Any help would be greatly appreciated!

import { useState }from 'react';
import React from 'react';
// import any components you want to use in this file:
import Navbar from './Navbar';
import TransportHeader from './header';
import {Button, Col, Container, Form, Row} from 'react-bootstrap';
import ReactDOM from 'react-dom/client';

function ManageUsers() {
    let newButtonState = "closed";
 
    function Appear (){
        newButtonState = "open";
        console.log("this should be looked at first!");
        return;
    }

    
    return (
        <div>
                <h1>MANAGE USERS 
                    <Button onClick={Appear()}variant="primary" size="lg">NEW USER</Button>
                    <input type="text" placeholder="Search for user.." name="search"/>
                    <Button variant="primary" size="lg">SEARCH</Button>       
                </h1>
                
            </div>

           {console.log("this should be second")}
            {newButtonState == "open" ? (
                <React.Fragment>
                <div className="form-container">
                        <label htmlFor='ID'>EMPLOYEE #</label>
                        <input className="form-control" id="ID" readOnly></input>
                    {console.log("this should be third")}
                    </form>
                </div>
                </React.Fragment>
                ):(
                <React.Fragment>
                    <Button variant="primary" size="lg">SEARCH</Button>  
                    {console.log("this should show up, until the button is clicked")}
                </React.Fragment>
                )}
        </div>
    );
}
export default ManageUsers;
Tags:

2

Answers


  1. 0

    useState causes re-renderings. So you should handle states by this:

    useState and onClick Demo

    Login or Signup to reply.
  2. 0

    so in react if you want to have a variable that when it change, ui rerender and change, you must use "useState", so what you want is somthing like this:

    ...
import React,{useState} from 'react';
...

function ManageUsers() {
    const [newButtonState,changeBtnState] = useState("closed");
 
    function Appear (){
        changeBtnState("open");
        console.log("this should be looked at first!");
    }

    
    return (
        <div>
                <h1>MANAGE USERS 
                    <Button onClick={Appear()}variant="primary" size="lg">NEW USER</Button>
                    <input type="text" placeholder="Search for user.." name="search"/>
                    <Button variant="primary" size="lg">SEARCH</Button>       
                </h1>
                
            </div>

           {console.log("this should be second")}
            {newButtonState == "open" ? (
                <React.Fragment>
                <div className="form-container">
                        <label htmlFor='ID'>EMPLOYEE #</label>
                        <input className="form-control" id="ID" readOnly></input>
                    {console.log("this should be third")}
                    </form>
                </div>
                </React.Fragment>
                ):(
                <React.Fragment>
                    <Button variant="primary" size="lg">SEARCH</Button>  
                    {console.log("this should show up, until the button is clicked")}
                </React.Fragment>
                )}
        </div>
    );
}
export default ManageUsers;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search