Create buttons( White, Red, Blue) dynamically and change background color (dynamically) on corresponding button click

This is about three buttons, on the click, there is a change of one color
Button's onClick prop is what allows us to add a function which fires when the user clicks on the button.

Try to use the same for changing the color too.

Material-UI library allows us to import and use different components to create a user interface in React applications. It saves time since developers do not need to write everything from scratch.

Use this to add:
npm install @material-ui/core @material-ui/styles

import React, { useState } from "react";
import { Container, Box, Button } from "@material-ui/core";
import { makeStyles, withStyles } from "@material-ui/styles";

const StyledButton = withStyles(() => ({
  root: {
    marginRight: "1rem",
    width: "25%",
    padding: "1rem",
    fontSize: "1.2rem",
    borderRadius: "1rem",
    color: "#000",
    fontWeight: "400",
    textTransform: "capitalize",
  },
}))(Button);

const useStyles = makeStyles(() => ({
  buttonContainerWrapper: {
    display: "flex",
    justifyContent: "center",
  },
  buttonContainer: {
    backgroundColor: "#ccc",
    border: "1px solid #000",
    padding: "1rem",
    display: "flex",
    justifyContent: "space-between",
  },
  lastButtonFilter: {
    marginRight: "0rem",
  },
  activeButton: {
    background: "#fc7303",
    color: "#fff",
  },
}));

export default function Filter() {
  const classes = useStyles();
  const [activeButton, setActiveButton] = useState("button-one");

  const clickedButtonHandler = (name) => {
    setActiveButton(name);
  };

  const buttons = ["button-one", "button-two", "button-three"];

  return (
    <Container className={classes.buttonContainerWrapper}>
      <Box className={classes.buttonContainer}>
        {buttons.map((name) => (
          <StyledButton
            name={name}
            className={activeButton === name ? `${classes.activeButton}` : ""}
            onClick={() => clickedButtonHandler(name)}
          >
            {name}
          </StyledButton>
        ))}
      </Box>
    </Container>
  );
}

To change the color on every click:

import React, { useState } from "react";
import { Container, Box, ButtonBase } from "@material-ui/core";
import { makeStyles, withStyles } from "@material-ui/styles";
import ReactDOM from "react-dom";
import { StrictMode } from "react";

const StyledButton = withStyles(() => ({
  root: {
    marginRight: "1rem",
    width: "25%",
    padding: "1rem",
    fontSize: "1.2rem",
    borderRadius: "1rem",
    color: "#000",
    fontWeight: "400",
    textTransform: "capitalize",
  },
}))(ButtonBase);

const useStyles = makeStyles(() => ({
  buttonContainerWrapper: {
    display: "flex",
    justifyContent: "center",
  },
  buttonContainer: {
    backgroundColor: "#ccc",
    border: "1px solid #000",
    padding: "1rem",
    display: "flex",
    justifyContent: "space-between",
  },
  lastButtonFilter: {
    marginRight: "0rem",
  },
  activeButton: {
    background: "#dbde21",
    color: "#fff",
  },
  secondactiveButton: {
    background: "#fc033d",
    color: "#fff",
  },
  thirdactiveButton: {
    background: "#434894",
    color: "#fff",
  },
}));

export default function Filter() {
  const classes = useStyles();
  const [activeButton, setActiveButton] = useState("first");

  const clickedButtonHandler = (e) => {
    console.log(e.target);
    const { name } = e.target;
    setActiveButton(name);
    console.log(activeButton);
  };

  return (
    <Container className={classes.buttonContainerWrapper}>
      <Box className={classes.buttonContainer}>
        <StyledButton
          name="first"
          className={activeButton === "first" ? `${classes.activeButton}` : ""}
          onClick={clickedButtonHandler}
        >
          Button One
        </StyledButton>
        <StyledButton
          name="second"
          className={
            activeButton === "second" ? `${classes.secondactiveButton}` : ""
          }
          onClick={clickedButtonHandler}
        >
          Button Two
        </StyledButton>
        <StyledButton
          name="third"
          className={
            activeButton === "third" ? `${classes.thirdactiveButton}` : ""
          }
          onClick={clickedButtonHandler}
        >
          Button Three
        </StyledButton>
      </Box>
    </Container>
  );
}

const rootElement = document.getElementById("root");

ReactDOM.render(
  <StrictMode>
    <Filter />
  </StrictMode>,
  rootElement
);