qr code shows up immediatly before i click the button reactjs

Question

im using react-qr-code package for generating qr code but the problem is it renders immediately instead of after clicking the submit button so for that, i want a function that can render the qr code after clicking the button i don't know what a should do i try slit it to components but still the same

import React from 'react';
import './QrCodeInfo.css';
import QRCode from "react-qr-code";

import { useState } from 'react';

function QrCodeInfo(props) {
   


  const [wifiName, setWifiName] = useState('');
  const [password, setPassword] = useState(''); 

const clickButton=()=>{
    let qrimage = password
    return (qrimage)
}


    return(
<div className='center'>
<div className=" center card shadow">
<div className='flex'>
<form>
    <div className="user-details">

              <div className="input-box">
                <span className="details">WifiName</span>
                <input type="text" placeholder="Enter your WifiName"  value={wifiName}
                   onChange={event => setWifiName(event.target.value)} required/>
              </div>
              <div className="input-box">
                <span className="details">Password</span>
                <input type="text" placeholder="Enter your Password" value={password}
                    onChange={event => setPassword(event.target.value)} required/>
              </div>
              </div>
              <div className='center'>
              <button type='button'className='center' onClick={clickButton}> Submit
               </button>
               </div>
</form>
<div>

<h1 >{wifiName}</h1>
<QRCode value='' />
</div>
</div>
</div>
</div>





        )

}

export default QrCodeInfo;

Answer 1

Because you just render the QRCode component without any condition. You can try this when the password has value and the user click the button. Show the QR code.

import React from "react";
import QRCode from "react-qr-code";

import { useState } from "react";

function QrCodeInfo() {
  const [wifiName, setWifiName] = useState("");
  const [password, setPassword] = useState("");
  const [qrCodeVisible, setQrCodeVisible] = useState(false);

  const clickButton = () => {
    let qrimage = password;
    setQrCodeVisible(!!qrimage);
  };

  return (
    <div className="center">
      <div className=" center card shadow">
        <div className="flex">
          <form>
            <div className="user-details">
              <div className="input-box">
                <span className="details">WifiName</span>
                <input
                  type="text"
                  placeholder="Enter your WifiName"
                  value={wifiName}
                  onChange={(event) => setWifiName(event.target.value)}
                  required
                />
              </div>
              <div className="input-box">
                <span className="details">Password</span>
                <input
                  type="text"
                  placeholder="Enter your Password"
                  value={password}
                  onChange={(event) => setPassword(event.target.value)}
                  required
                />
              </div>
            </div>
            <div className="center">
              <button type="button" className="center" onClick={clickButton}>
                Submit
              </button>
            </div>
          </form>
          <div>
            <h1>{wifiName}</h1>
            {qrCodeVisible && <QRCode value={password} />}
          </div>
        </div>
      </div>
    </div>
  );
}

export default QrCodeInfo;

Codesandbox