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.


Related Query

More Query from same tag