score:4

Accepted answer

since you've made your own component, your <button> component needs to accept a prop of onclick as well:

import react from 'react';
import styles from './button.module.css';
export const button = (props) => {
    return (
        <button 
            classname = {props.value === '+' ? styles.addbutton : styles.subbutton} 
            type = "button"
            onclick={props.onclick}
        >{props.value}</button>
    )
}

as it stands, in your second block of code, the onclick is not tied to anything... it's simply a prop that never gets utilized, which is why it's not working. the way you are using usestate and setcounter is all done correctly.

score:2

another clean way you can use is spread the props and add to the button, this way your button component is more configurable.

ex:

.....
<button onclick = {() => setcounter(0)} classname={styles.addbutton}  />
<button onclick = {() => setcounter(counter - 1)} classname={styles.subbutton} />
....

and in button component

export const button = ({value, ...buttonprops}) => {
    return (
        <button 
            {...buttonprops}, // here use the spread operator
            type = "button"
        >{value}</button>
    )
}

example here


Related Query

More Query from same tag