Quiero crear un componente de contador para usarlo varias veces y quiero crear un componente de botón o un botón en app.js para restablecer todos los componentes. Así que creé el componente de contador, pero no entiendo cómo crear el botón. Creé un botón de reinicio individual para cada componente. Pero no puedo crear el botón de reinicio que reiniciará todo. Lo intenté de muchas maneras, pero fracasé.

Aquí está mi componente contador:

 import { useCallback, useState } from 'react'; import Button from './Button'; import ShowCount from './ShowCount'; export default function ReactCounter({num}) { const [count, setCount] = useState(0); const resetCounter = () => { setCount(0); }; const incrementByOne = useCallback(() => { setCount((prevCount) => prevCount + num); }, [num]) return ( <div className="app"> <ShowCount count={count} title = "Counter 1" /> <Button handleClick={incrementByOne}>Increment By One</Button> <Button handleClick={resetCounter}>Reset</Button> </div> ) }

Este es el archivo app.js:

 import ReactCounter from './components/ReactMeth'; import Title from './components/Title'; export default function App() { return ( <div className="app"> <Title /> <ReactCounter num={10} /> <ReactCounter num={2} /> <ReactCounter num={1} /> </div> ) }

Y aquí están los otros componentes:

ShowCount.js

 import React from 'react'; function ShowCount ({count, title}) { console.log(`rendering ${title}...`); return( <p> {title}: {count} </p> ) } export default React.memo(ShowCount);

Botón.js

 import React from 'react' function Button({handleClick, children}) { return ( <p> <button type='button' onClick={handleClick}> {children} </button> </p> ) } export default React.memo(Button)