ReactJS change button on click

Question

I'm doing a booking project. I'm working on a follow button per asset on my index page. The button appears when I hover over the assets' image. I'm trying to make it so the button changes to another font awesome icon on click. I'm not sure where to start. I think I need to make a new state, is that correct?

render

<Card className={style.cardContainer}>
    <div className={style.hoverContainer}>
        <a onClick={modalShow}>
            <img className={style.cardImage} alt="activity preview" src={ NodeServerURL + activity.imageLocation }/>

            <div className={style.hoverOverlay}>
                {btnHoverActions}           
                <div className={style.hoverOverlayTextGroup}>
                      ...
                </div>
            </div>
        </a>
    </div>
</Card>

how i assigned it (only shows if role is customer)

let btnHoverActions = ''

if (user.token === null) {
        btnModalActions = (
            <div className="float-right">
                ...
            </div>
        )
    } else if (user.role === 'customer') {
        btnModalActions = (
            <div className="float-right">
                ...
            </div>
        )

        btnHoverActions = (
            <a className={style.hoverOverlayButton} onClick={ (e) => followActivity(e)}>
                <i class="far fa-heart"></i>
            </a>
        )
    }

follow function

const followActivity = (e) => {
    e.preventDefault()
    e.stopPropagation()

    let variables = {
        ...
    }

    GQLClient({}).request(Mutation.addToCart, variables)
}

Answer 1

I think I need to make a new state, is that correct?

Yes you are correct, you will need some state. Based on what I can tell you are using a function component, so here is how I would do it:

const MyComponent = () => {
    const [clickedButton, setClickedButton] = useState(false)  //creating a new of state

    const followActivity = (e) => {
        e.preventDefault()
        e.stopPropagation()

        let variables = {
            ...
        }

        GQLClient({}).request(Mutation.addToCart, variables)

        setClickedButton(true) //setting the new state
    }

    let btnHoverActions = ''

    if (user.token === null) {
        btnModalActions = (
            <div className="float-right">
                ...
            </div>
        )
    } else if (user.role === 'customer') {
        btnModalActions = (
            <div className="float-right">
                ...
            </div>
        )

        //this needs to change depending on state
        btnHoverActions = (
            <a className={style.hoverOverlayButton} onClick={ (e) => followActivity(e)}>
                (clickedButton) ?
                    (<i class="some-different-class-for-the-icon"></i>) :
                    (<i class="far fa-heart"></i>)
            </a>
        )
    }

    //no changes here
    return ( 
        <Card className={style.cardContainer}>
            <div className={style.hoverContainer}>
                <a onClick={modalShow}>
                    <img className={style.cardImage} alt="activity preview" src={ NodeServerURL + activity.imageLocation }/>

                    <div className={style.hoverOverlay}>
                        {btnHoverActions}           
                        <div className={style.hoverOverlayTextGroup}>
                              ...
                        </div>
                    </div>
                </a>
            </div>
        </Card>
    )
}

I'm hoping I reconstructed your component correctly and this will be helpful:D