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>
)
}
Source: stackoverflow.com
Related Query
- useState doesn't update the state with component
- Why does calling useState's setter with the same value subsequently trigger a component update even if the old state equals the new state?
- How to update state with the useState hook
- React component does not update with the change in redux state
- reactjs custom component input value doesnt update with state change
- Passing a function with React Context API to child component nested deep in the tree to update state value
- how to update the state if dropdown has selected value with Hooks and useState
- Can't update parent component state with React UseState
- update the state of my component with the response data after Post request with axios
- How to update state of the component with data from API
- change the state randomly of two divs with useState in react component / random number
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- Force a re-render (update the state and update the DOM) immediately with react.js
- How to update the state of a sibling component from another sibling or imported component in REACT
- Updating Parent Component State from Child Component with UseState React Hook
- React w/ TypeScript: why is the type for the state lost when useState with a callback as the updater
- What's the best alternative to update nested React state property with setState()?
- How to update state with usestate in an array of objects?
- Why is my component rendering when useState is called with the same state?
- How to test the state of a functional component in React with Jest (No Enzyme)
- Form created with React doesn't update the backing state object
- React. How to update the state with previous state?
- Combine useReducer with useState in the same component
- What is the 'proper' way to update a react component after an interval with hooks?
- A component is changing the default value state of an uncontrolled Slider after being initialized. Material UI Slider with Redux State
- Use useState value in useEffect without making the state update useEffect
- How to update state of a component with value from reducer state in react-redux?
- React State update a nested array with objects based on the id when iterated
- Why won't my controlled Input component in React update with the state?
- Can't perform a React state update on an unmounted component with fetch POST method
More Query from same tag
- Pure ReactJS Components
- Component didn't re-renders on state change?
- How do I pass a function through props to a chid component where the parent is a functional component
- How to redirect to completely new page after user click in react?
- What is the typescript equivalent for Asynchronous action in Redux-toolkit
- Why arent my CSS styles being applied to on laptop media query?
- Hide and show number of characters in <p> - React
- Trigger modal shown for React Bootstrap
- React Table not sorting numbers correctly
- How do I delete a card component using id from a data object?
- My request is responding with a 404 error yet it is posted as supposed
- How to change calls to localhost into external api calls when deploying app to Heroku?
- Call method passed from redux in react from child to parent
- ReactJS - Changing color of component dynamically when radio button is clicked
- Replace comma with special characters in Javascript
- TypeError: plugin.test is not a function when using jest, enzyme and react-16, typescript
- How to declare React.Component type from external module with separate declaration file?
- What type of syntax is this and what does it mean? 'variable?: value'
- ERROR in ./app/index.js on webpack -p
- Socket.io not connecting on React Native
- Axios post spotify api request return 400
- Prevent an empty submission in React
- Conditional types for a dynamic React component in Typescript
- how to make dropdown work using up and down arrow keys in react
- How should I use React to display global error messages?
- How to update state itself using react hooks
- validateDOMNesting(...): #text cannot appear as a child of <tr>
- Reactjs map over redux store
- Can we create a link with dynamic ID in SPA model
- React.js Uncaught Error: Invariant Violation updating list