Error encountered when accessing color background in the state of Material UI

Question

Error encountered when accessing color background in the state of Material UI

My eyes are feeling strained, and I'm working on implementing a slider that can adjust both the radius and color of a button.

This sandbox successfully updates the radius.


  Here is the code:
  
  (Code content)

Currently, my focus is on utilizing a color picker to modify the background color of the button, along with the font color eventually.

I've encountered an error message related to `this.state`. Any suggestions?

Here is another sandbox in progress with the error - https://codesandbox.io/s/material-demo-forked-l35qy?file=/demo.js

Below is the code snippet with the error:


  (Code content)

reactjs button material-ui background-color color-picker

Answer 1

Answer №1

Utilizing state inside of useStyles is not recommended since you only have access to the theme and not any props. It's suggested to use the makeStyles call instead, as it allows you to pass some props. This issue has already been addressed in a previous answer with a helpful example.

Exploring how to pass props to material UI style

Another concern is that the functional component being used does not handle states in the right manner. I have revised the code by implementing the useState hook so that it can correctly handle the color for you.

export default function InputSlider() {
  const classes = useStyles();
  const [value, setValue] = React.useState(30);
  const [color, setColor] = React.useState({ background: "#fff" });

  const handleSliderChange = (event, newValue) => {
    setValue(newValue);
  };
  const handleInputChange = (event) => {
    setValue(event.target.value === "" ? "" : Number(event.target.value));
  };
  const handleBlur = () => {
    if (value < 0) {
      setValue(0);
    } else if (value > 30) {
      setValue(30);
    }
  };
  const handleClick = (color) => {
    setColor(color);
  };

  const handleClose = () => {
    setColor({ displayColorPicker: false });
  };

  const handleChange = (color) => {
    setColor(color);
  };
  return (
    <div className={classes.root}>
      <style>
        {`:root {
          --borderRadius = ${value}px;
        }`}
      </style>
      <Button
        style={{ borderRadius: value }}
        variant="contained"
        color="primary"
        value="value"
        onChange={handleSliderChange}
        className={classes.Button}
      >
        Fire laser
      </Button>
      <Grid container spacing={2}>
        <Grid item xs>
          <Slider
            value={typeof value === "number" ? value : 0}
            onChange={handleSliderChange}
            aria-labelledby="input-slider"
          />
        </Grid>
        <Grid item>
          <Input
            value={value}
            margin="dense"
            onChange={handleInputChange}
            onBlur={handleBlur}
            inputProps={{
              step: 10,
              min: 0,
              max: 24,
              type: "number"
            }}
          />
        </Grid>
      </Grid>
      <div>
        <Button style={useStyles.color}></Button>

        <div style={useStyles.swatch} onClick={handleClick}>
          <div style={useStyles.color} />
        </div>
        {color ? (
          <div style={useStyles.popover}>
            <div style={useStyles.cover} onClick={handleClose} />
            <SketchPicker color={color} onChange={handleChange} />
          </div>
        ) : null}
      </div>
    </div>
  );
}

Answer 2

Utilizing state inside of useStyles is not recommended since you only have access to the theme and not any props. It's suggested to use the makeStyles call instead, as it allows you to pass some props. This issue has already been addressed in a previous answer with a helpful example.

Exploring how to pass props to material UI style

Another concern is that the functional component being used does not handle states in the right manner. I have revised the code by implementing the useState hook so that it can correctly handle the color for you.

export default function InputSlider() {
  const classes = useStyles();
  const [value, setValue] = React.useState(30);
  const [color, setColor] = React.useState({ background: "#fff" });

  const handleSliderChange = (event, newValue) => {
    setValue(newValue);
  };
  const handleInputChange = (event) => {
    setValue(event.target.value === "" ? "" : Number(event.target.value));
  };
  const handleBlur = () => {
    if (value < 0) {
      setValue(0);
    } else if (value > 30) {
      setValue(30);
    }
  };
  const handleClick = (color) => {
    setColor(color);
  };

  const handleClose = () => {
    setColor({ displayColorPicker: false });
  };

  const handleChange = (color) => {
    setColor(color);
  };
  return (
    <div className={classes.root}>
      <style>
        {`:root {
          --borderRadius = ${value}px;
        }`}
      </style>
      <Button
        style={{ borderRadius: value }}
        variant="contained"
        color="primary"
        value="value"
        onChange={handleSliderChange}
        className={classes.Button}
      >
        Fire laser
      </Button>
      <Grid container spacing={2}>
        <Grid item xs>
          <Slider
            value={typeof value === "number" ? value : 0}
            onChange={handleSliderChange}
            aria-labelledby="input-slider"
          />
        </Grid>
        <Grid item>
          <Input
            value={value}
            margin="dense"
            onChange={handleInputChange}
            onBlur={handleBlur}
            inputProps={{
              step: 10,
              min: 0,
              max: 24,
              type: "number"
            }}
          />
        </Grid>
      </Grid>
      <div>
        <Button style={useStyles.color}></Button>

        <div style={useStyles.swatch} onClick={handleClick}>
          <div style={useStyles.color} />
        </div>
        {color ? (
          <div style={useStyles.popover}>
            <div style={useStyles.cover} onClick={handleClose} />
            <SketchPicker color={color} onChange={handleChange} />
          </div>
        ) : null}
      </div>
    </div>
  );
}

Answer 3

Answer №2

@RichardHpa is absolutely right, you cannot access state in makeStyles and it seems like you are confusing class component with functional component. In this scenario, it is advisable to use useState() throughout.

You already have an example of how to set the border radius, so you can follow that same pattern to apply it to your background color when styling the Button directly.

Check out the codesandbox here:

https://codesandbox.io/s/material-demo-forked-djh78?file=/demo.js

<Button
    style={{
        borderRadius: value,
        background: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`

        // You might need another color picker for text color. Otherwise, the background color will be the same as the text color.
        // color: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
    }}
    variant="contained"
    color="primary"
    value="value"
    onChange={handleSliderChange}
    className={classes.Button}
>

No need to thank me, @RichardHpa deserves all the credit.

Answer 4

@RichardHpa is absolutely right, you cannot access state in makeStyles and it seems like you are confusing class component with functional component. In this scenario, it is advisable to use useState() throughout.

You already have an example of how to set the border radius, so you can follow that same pattern to apply it to your background color when styling the Button directly.

Check out the codesandbox here:

https://codesandbox.io/s/material-demo-forked-djh78?file=/demo.js

<Button
    style={{
        borderRadius: value,
        background: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`

        // You might need another color picker for text color. Otherwise, the background color will be the same as the text color.
        // color: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
    }}
    variant="contained"
    color="primary"
    value="value"
    onChange={handleSliderChange}
    className={classes.Button}
>

No need to thank me, @RichardHpa deserves all the credit.

Error encountered when accessing color background in the state of Material UI

Answer №1

Answer №2

Similar questions

When a parameter is passed into a React-Query function with an undefined value, it can lead to the API returning a 404 error

How can I position a Button at the center of my Grid item using Material UI?

Can you use React Hooks to implement refs for ScrollView within a functional component?

Highlighting text within ReactJS using Rasa NLU entities

What is the best way to make the NextJS Image Component in React JSX automatically adjust its height?

Create a list using ReactJS

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

I successfully installed the Firebase tools using npm, but encountered an error during the process

The ThemeProvider does not automatically provide theme injections

An effective solution to address the Eslint warning regarding the prohibition of spreading specific props

Utilize the onClick event to access a method from a parent component in React

What is the most effective way to compare a nested array using the map or filter function in order to return only the first match

Issue retrieving nested object in NextJS

After the animation is complete, the TextField will automatically redirect to the main page

The ideal login page design

You are unable to utilize global SCSS in Next.js as the Global CSS is restricted to being imported only from files within your Custom <App> component

What is the best way to update the state of a response from an API call for a detailed object using React context, so that there is no need to retrigger the API call

Remove an array object in React Redux

React Router V6 - page is not found in browsing history

Determining the precise spacing needed for a personalized cursor