Question

0

209

Vistas

React onclick setState not working with arrow function

I have a component. I want to calculate some numbers here. When click the button it's not working with onClick={() => setEarned(calculateEarned)}. But when I change it like onClick={setEarned(calculateEarned)} it works but one time and when the page loaded. So I'm stack. Where is the problem I couldn't find.

import { Button, PrimaryButton } from "../../components/Button/Button"

export const CryptoCalculator = () => {
    const [earned, setEarned] = useState(0)

    function calculateEarned() {
        console.log('hit')
        return 1
    }

    return (
        <Container>
            <PrimaryButton
                title="Calculate"
                onClick={() => setEarned(calculateEarned)}
            ></PrimaryButton>

            <Earned>{earned}</Earned>
        </Container>
    )
}

EDIT: Problem solved. The problem is with the PrimaryButton component. I tried with button and then function worked. Here is the Button component:

import styled from "styled-components"

const Btn = styled.button`
    /*some css codes*/
`

const PrimaryBtn = styled(Btn)`
    /*some special css codes for primary button*/
`

export const Button = ({ title }) => {
    return <Btn>{title}</Btn>
}

export const PrimaryButton = ({ title }) => {
    return <PrimaryBtn>{title}</PrimaryBtn>
}

7 months ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-10T23:22:52.599Z

You need to call your function correct way. setEarned(calculateEarned()) instead of setEarned(calculateEarned)

Example :

export const CryptoCalculator = () => {
    const [earned, setEarned] = useState(0)

    function calculateEarned() {
        console.log('hit')
        return 1
    }

    return (
        <Container>
            <PrimaryButton
                title="Calculate"
                onClick={() => setEarned(calculateEarned())}
            ></PrimaryButton>

            <Earned>{earned}</Earned>
        </Container>
    )
}

Answer 2 · 2022-07-10T23:22:52.605Z

I've added onClick prop to Button component and then it started to act like a button. So, problem solved!

export const Button = ({ title, onClick }) => {
    return <Btn onClick={onClick}>{title}</Btn>
}

export const PrimaryButton = ({ title, onClick }) => {
    return <PrimaryBtn onClick={onClick}>{title}</PrimaryBtn>
}