Почему в моём случае не работает onClick?

Question

Подскажите пожалуйста, почему в моём случае перестает работать ripples? Если не устанавливать useState, то работает отлично. Но вот именно используя этот хук он перестает работать. Если вызывать его вне компонента , а например в div он вообще никак не работает, зато сам Ripples отрабатывает на ура. В чем может быть причина и как это исправить? Я новичок, подскажите пожалуйста

import { useState } from "react";
import styles from "./Test.module.scss";
import { createRipples } from 'react-ripples'
 
const Test = () => {
    const [count, setCount] = useState<number>(0);
    
    const MyRipples = createRipples({during:700,color: 'red'})

    const handleClick = (index: number) =>  {
        setCount(index);
    }
    return(
        <>
<div><MyRipples onClick={() => handleClick(1)}><button className={styles.button}>1</button></MyRipples></div>
        </>
    )

}

export default Test;

Answer 1

Подскажите пожалуйста, почему в моём случае перестает работать ripples?

Решил потестить этот react-ripples... У меня все работает.

import { useState } from 'react'
import { createRipples } from 'react-ripples'

const MyRipples = createRipples({during:700,color: 'red'})

function App() {
    const [count, setCount] = useState(0);
    const handleClick = index =>  setCount(v => v + index);
    return <div>
        <MyRipples onClick={() => handleClick(1)}>
            <button style={{width: '100px', height: '50px'}}> {count} </button>
        </MyRipples>
    </div>
}

export default App

БЛОГ НА HUSL

Почему в моём случае не работает onClick?

Ответы (1 шт):