CODEWITHSUNDEEP
reactjs
Maks
Maks

Reputation: 15

React function on pageload

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

Upvotes: 1

Views: 1462

Answers (3)

MWO
MWO

Reputation: 2806

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.

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

var heartsNum = 3;

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


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

    useEffect(() => {
        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 = () => {
        heartsNum-=1;
        console.log(heartsNum);
        heartsDisplay();
    }

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

export default App

Upvotes: 0

Siyahul Haq
Siyahul Haq

Reputation: 469

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

Upvotes: 0

Gautam Kothari
Gautam Kothari

Reputation: 321

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

Upvotes: 1

Related Questions