I want the heartsDisplay function call on pageload, but doing it like that causes an error. It works only with on click. How do I do this in React?

Or maybe there is a way to add default value for hearts in useState hook?

import React, { useState } from 'react'
import './App.css';

var heartsNum = 3;

const App = () => {
    const [hearts, setHearts] = useState("");
    
    var Score = 0;
    var customColor = {color: 'red'};

    const heartsDisplay = () => {
        if (heartsNum === 3) {
            setHearts("Hearts: ❤❤❤");
        } else if (heartsNum === 2) {
            setHearts("Hearts: ❤❤");
        } else if (heartsNum === 1) {
            setHearts("Hearts: ❤");
        } else if (heartsNum < 1) {
            setHearts("Hearts: ");
        }
    };

    heartsDisplay();

    const changeHearts = () => {
        heartsNum = heartsNum - 1;
        console.log(heartsNum);
        heartsDisplay();
    }
    
    return (
        <div>
            <h3 className='hearts'>{hearts}</h3>
            <button className='col1' onClick={changeHearts}>Click</button>
        </div>
    )
}

export default App

CodePudding user response：

useEffect(()=>{
    heartsDisplay();
},[]);

Call your function inside useEffect() hook

The useEffect Hook allows you to perform side effects in your components.

Some examples of side effects are: fetching data, directly updating the DOM, and timers.

useEffect accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)

https://reactjs.org/docs/hooks-effect.html

CodePudding user response：

import React, { useState } from 'react'
import './App.css';

var heartsNum = 3;

const App = () => {
    const [hearts, setHearts] = useState("");
    
    var Score = 0;
    var customColor = {color: 'red'};

    const heartsDisplay = () => {
        if (heartsNum === 3) {
            setHearts("Hearts: ❤❤❤");
        } else if (heartsNum === 2) {
            setHearts("Hearts: ❤❤");
        } else if (heartsNum === 1) {
            setHearts("Hearts: ❤");
        } else if (heartsNum < 1) {
            setHearts("Hearts: ");
        }
    };

call the function inside useEffect hook with no deps to run this function one time to trigger when a change in state or props put that state or props in deps array if you want to trigger the function before unmount return a function in useEffect callback do it in that function if you call the function openly in the component function it will call in all render

useEffect(() => {
 heartsDisplay();
},[]);

const changeHearts = () => {
    heartsNum = heartsNum - 1;
    console.log(heartsNum);
    heartsDisplay();
}

return (
    <div>
        <h3 className='hearts'>{hearts}</h3>
        <button className='col1' onClick={changeHearts}>Click</button>
    </div>
)

}

export default App

CodePudding user response：

You are misunderstanding the use of useState. Default value for useState is the default value for the hearts variable.

What you are looking for is probably the useEffect hook. It's default behavior is

similar to componentDidMount and componentDidUpdate

which basically leads to on page load behavior.

You probably also want to useState for heartsNum?

import React, { useState, useEffect } from 'react'
import './App.css';

const App = () => {
    const [hearts, setHearts] = useState("");
    const [heartsNum, setHeartsNum] = useState(3);


    var Score = 0;
    var customColor = {color: 'red'};

    useEffect(() => {
        console.log(heartsNum);
        heartsDisplay();
      });
    

    const heartsDisplay = () => {
        if (heartsNum === 3) {
            setHearts("Hearts: ❤❤❤");
        } else if (heartsNum === 2) {
            setHearts("Hearts: ❤❤");
        } else if (heartsNum === 1) {
            setHearts("Hearts: ❤");
        } else if (heartsNum < 1) {
            setHearts("Hearts: ");
        }
    };

    const changeHearts = () => {
        setHeartsNum(heartsNum-1)
        console.log(heartsNum);
        heartsDisplay();
    }
    
    return (
        <div>
            <h3 className='hearts'>{hearts}</h3>
            <button className='col1' onClick={changeHearts}>Click</button>
        </div>
    )
}

export default App