score:0
here are a few examples on how to make the button label change onclick action:
import react, { usestate } from "react";
import { render } from "react-dom";
import { grommet, box, button, grommet, text } from "grommet";
const app = () => {
const [label, setlabel] = usestate(1);
const [name, setname] = usestate("shimi");
const flipname = name => {
return name === "shimi" ? setname("shai") : setname("shimi");
};
return (
<grommet theme={grommet}>
<box pad="small" gap="small" width="small">
// label is a number that is being increased on every click event
<button
label={label}
onclick={() => {
setlabel(label + 1);
}}
/>
// label string is controlled with external logic outside of the button.
<button
label={<text weight="400">{name}</text>}
onclick={() => {
flipname(name);
}}
/>
</box>
</grommet>
);
};
render(<app />, document.getelementbyid("root"));
in addition to the examples above, in grommet, you don't have to use the label
prop and you can leverage the button children to control the way your button display.
Source: stackoverflow.com
Related Query
- Changing button label on click with grommet?
- Changing two states with one button click
- Changing div colour styling with button click in React
- Have 2 issues with React, Changing the color of single button with click and play different sounds on each click
- Deactivate input in react with a button click
- Changing style of a button on click
- React Formik bind the external button click with onSubmit function in <Formik>
- opening a modal with the click of a button
- page is not rendering when I click back button with react-router
- How to change image on button click with React Hooks?
- How to fetch data on page load and then on button click with useEffect
- Align input with labels to button without label (vertically)
- How to open an <input type="file"/> with a button click in React
- Testing navigation in react with MemoryRouter after a button click (jest, enzyme)
- Updating text after button click with react.js
- How to delete objects from react state hook array with a button click
- Changing text color on click with react hooks
- Is there any way we can export the Antd table data into an excel sheet on button click with reactjs
- How to Create a dropdown Button with see more option and on click toggle should not happen in react js?
- With React, clicking on a label is not changing the input type checkbox checked value. Why?
- How to open a new page with specific dataset with a button click in react?
- Looping Through a set of Images on Button Click with Next Js
- React state not changing on button click
- Why my "new Question" button is not changing the question when i click the button?
- Trying to set & send a state variable as an URL string in a POST request with a single button click
- Changing the label of required in text-field with react and material ui
- How can click on button to get one of components with react
- Ant design Tree defaultExpandAll doesnt work with button click for react
- Radio button with label in react js
- When I click cancel button in react why the page is reloading and why its path also changing in react?
More Query from same tag
- reactjs- callback function still not updating background color upon enter key being pressed
- React Router: How to match indeterminate amount of sub paths of a nested route?
- Preventing unnecessary re-renders of table rows / children in React
- How to Test Responsive React Components with React Testing Library
- How to keep unique months in array of timestamps
- Material ui update select style globally with theme
- Apply the .map method to an array of objects
- JSX condition that does not work with React
- Building Dropdown component
- The most "react" way to pass state to other components
- how do I make webpack not convert process.env variables to their values during build?
- React-redux error when webpack: SyntaxError: Unexpected token
- How to pass custom attributes onClick in React
- Not able to find real difference between .jsx and js file
- how to override material ui css using css (reactjs)?
- reactjs ES6: Unable to understand the syntax
- Nested array of objects in a React table
- How to get values from select react js
- How React manage state updates wrapped in async block
- How to get data from local json file using actions and axios.get() (Redux)?
- React Render Issue
- bind(this) not working on ajax success function
- React JS - stop infinite scroll at the end of array
- Calling Dispatch function from a blank javascript file
- Replace of setState callback in react hook with useEffect hooks for complicated scenario not working
- BABEL .default is not a valid Plugin property at Object.keys.forEach.key
- Mocking an API call method inside componentDidMount
- Cannot read state from Redux store. What did I miss?
- How to use react-bootstrap in typescript project
- SVG is offset in navbar