CODEWITHSUNDEEP
javascriptreactjs
Daniel
Daniel

Reputation: 3

Reactjs - button not displaying after being told to render by a function

In reactjs I have an button that when clicked, (after doing some checks) loads another button on the same page. The show/hide functionality works fine on its own when changing the script manually to true/false and reloading the application but will not load when the state is changed by the button click function after the page has been loaded. The state of the variable 'buttonshow' changes as i have console.logged it to make sure of that. I don't get any error messages it simply just does nothing. Note that I am using electron to display the react file but I don't think it would make a difference if it was loaded straight onto a browser.

import React from "react";

export const keyPage = () => {

  var buttonshow = false

  const handleClick = () => {
    buttonshow = true
   };

  return (
    <div className="signin-page">  
       <button onClick={handleClick}> Check Key </button>

       {buttonshow ? (
          <button> GO! </button>
       ) : null}
    </div>
  );
};

export default KeyPage

EDIT: After reading up on how to do this and reading the responses to my question I realise it was very basic what I was trying to achieve however after following the guidance I am presented with this issue:

"React Hook "useState" is called in function "keyPage" which is neither a React function component or a custom React Hook function". I think this may be the way that I define my components but I am not sure.

Upvotes: 0

Views: 1091

Answers (2)

jered
jered

Reputation: 11591

Variables that you declare inside the scope of your functional component do not persist between renders. Every time your component renders, the function is evaluated again, and any variables that you declared are gone forever.

In order to get around this, React has a special feature you can use called the useState hook. To put it in very basic terms, useState allows you to keep track of values between component renders without them being wiped out.

import React from "react";
import { Link } from "react-router-dom";

// Note the capitalized function name.
// React component names must  be capitalized.
export const KeyPage = () => {

  const [buttonshow, setButtonshow] = React.useState(false);

  const handleClick = () => {
    setButtonshow(true);
   };

  return (
    <div className="signin-page">  
       <button onClick={handleClick}> Check Key </button>

       {buttonshow ? (
          <button> GO! </button>
       ) : null}
    </div>
  );
};

The topic is a bit difficult to understand at first. I recommend you read the official React documentation thoroughly and continue practicing on your own. :)

Upvotes: 1

Hyunwoong Kang
Hyunwoong Kang

Reputation: 530

You need to use useState hook to implement stateful logic inside your functional component. Refer the original documentation here. https://reactjs.org/docs/hooks-state.html

import React, { useState } from "react";
import { Link } from "react-router-dom";

export const keyPage = () => {

  const [buttonshow, setButtonshow] = useState(false);

  const handleClick = () => {
    setButtonshow(true);
  };

  return (
    <div className="signin-page">  
       <button onClick={handleClick}> Check Key </button>

       {buttonshow ? (
          <button> GO! </button>
       ) : null}
    </div>
  );
};

export default KeyPage

Upvotes: 0

Related Questions