Changing button label on click with grommet?

Question

Does anyone have any insight into changing button label on click when using grommet UI and styled components? Is it easier to just use a custom button rather than grommets?

Answer 1

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.