What is v-if in react-CodePudding

What is v-if in react? I tried this but My div with loading class does not work when the loading data changes, so the div doesn't re-render itself. codes is here:

{
    loading &&
    <div className="loading"></div>
}

I'm changing loading with a function, this function working with onclick event.

all of my code:

import React from "react";
import axios from "axios";
export class LoginPage extends React.Component{
    render(){
        let username = '',
            password = '',
            loading = false

        function login(){
            loading = true;
            console.log(loading)
        }

        return (
            <div className="App">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
                      integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
                      crossOrigin="anonymous" referrerpolicy="no-referrer"/>
                        {
                            loading &&
                            <div className="loading"></div>
                        }
                <div className="login">
                    <h1>Login/Register</h1>
                    <div>
                        <i className="fas fa-user"></i>
                        <input type="text" onChange={(e) => username = e.target.value} placeholder="Username" maxLength="15"/>
                    </div>
                    <div>
                        <i className="fas fa-lock"></i>
                        <input type="Password" placeholder="Password" onChange={(e) => password = e.target.value} maxLength="18"/>
                    </div>
                    <button onClick={() => login()}>Login/Register</button>
                </div>
            </div>
        );
    }
}

CodePudding user response：

I'd suggest you read about React State, some things in this piece of code are wrong. But let's fix your problem.

First add this variable to the state and then change it with setState, to trigger a rerender:

export class LoginPage extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        loading: false
      };
    }
    render(){
        let username = '',
            password = '',

        function login(){
            this.setState({ loading: true })
            console.log(loading)
        }

       // your return will stay the same
    }
}

CodePudding user response：

V-if is a Vue directive, so it doesn't work with React. To update your UI correctly in React you must create loading variable as a state variable. If you are creating your component as a Class Component, then you should create the loading variable as part of the state object and update the state using a handler function like this below:

class LoadingComponent extends React.Component {
//state variable, each update to this object will update your UI 
//and rerender the component tree under that updated component
 state = {
 loading: false
 }
 
 //handler for the onClick event you are triggering to update you state
 //and rerender your component
 handleOnClick = () => {
 const isLoading = this.state.loading
 this.setState({loading: !isLoading})
 }
 
 //... rest of your component
 }

If you are using a functional component, then you should create loading variable with the useState hook provided by React, and update it with the setter you create for that variable:

import {useState} from 'react'

const LoadingComponent = () => {
//State variable declaration
const [loading, setLoading] = useState(false)

//handler for the onClick event
//you can directly put the setLoading call in the onClick prop of the component 
//but I separate it here for more clear explanation
const handleOnClick = () => {
setLoading(!loading)
}