Category: React

Sometimes, we want to disable a button when an input is empty with React.

In this article, we’ll look at how to disable a button when an input is empty with React.

How to disable a button when an input is empty with React?

To disable a button when an input is empty with React, we can set the input’s value as a state’s value.

Then we can use the state to conditionally disable the button when the state’s value is empty.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [name, setName] = useState();

  return (
    <div>
      <input onChange={(e) => setName(e.target.value)} />
      <button disabled={!name}>save</button>
    </div>
  );
}

to create the name state with the useState hook.

Then we add a text input element with its onChange prop set to a function that calls setName to set the input’s value as name‘s value.

e.target.value has the value of the input box.

Next, we add a button with the disabled prop set to !name to disable the button when the input box is empty.

Conclusion

To disable a button when an input is empty with React, we can set the input’s value as a state’s value.

Then we can use the state to conditionally disable the button when the state’s value is empty.

Sometimes, we want to use radio buttons in React.

In this article, we’ll look at how to use radio buttons in React.

How to use radio buttons in React?

To use radio buttons in React, we can set a state to the selected radio button’s value attribute value.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [gender, setGender] = useState();
  console.log(gender);

  return (
    <div>
      <input
        type="radio"
        value="male"
        name="gender"
        onChange={(e) => setGender(e.target.value)}
      />
      Male
      <input
        type="radio"
        value="female"
        name="gender"
        onChange={(e) => setGender(e.target.value)}
      />
      Female
    </div>
  );
}

We add 2 radio buttons by adding input elements.

And we set the name attribute of them to the same value to put them in the same group.

Next, we set the onChange prop of each radio input to a function that calls the setGender function to set gender to the value of the value attribute of the radio button that’s selected.

e.target.value has the value of the value attribute.

As a result, when we click on a radio button, the latest value of gender is logged.

Conclusion

To use radio buttons in React, we can set a state to the selected radio button’s value attribute value.

Sometimes, we want to change the text field font color in React Material UI.

In this article, we’ll look at how to change the text field font color in React Material UI.

How to change the text field font color in React Material UI?

To change the text field font color in React Material UI, we call the makeStyles function with an object with the styles we want to apply.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles({
  input: {
    color: "blue"
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <TextField
      inputProps={{ className: classes.input }}
      id="outlined-basic"
      label="Write something..."
      variant="outlined"
    />
  );
}

to call makeStyles with an object that has the input property that’s set to an object with the color property set to 'blue'.

Next, we call useStyles to return the classes object.

Then we set the inputProps property of the TextField component to an object with the className property set to the classes.input class which we defined with makeStyles.

We set the color property to 'blue', so the input text should be blue.

Conclusion

To change the text field font color in React Material UI, we call the makeStyles function with an object with the styles we want to apply.

Sometimes, we want to change color a of Select component’s border and arrow icon with React Material UI.

In this article, we’ll look at how to change color a of Select component’s border and arrow icon with React Material UI.

How to change color a of Select component’s border and arrow icon with React Material UI?

To change color a of Select component’s border and arrow icon with React Material UI, we can call the makeStyles function with an object that has the styles for the before and after pseudoselectors.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

const color = "blue";

const useStyles = makeStyles({
  select: {
    "&:before": {
      borderColor: color
    },
    "&:after": {
      borderColor: color
    }
  },
  icon: {
    fill: color
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <Select
      className={classes.select}
      inputProps={{
        classes: {
          icon: classes.icon,
          root: classes.root
        }
      }}
      value="1"
    >
      <MenuItem value="1"> Foo 1</MenuItem>
      <MenuItem value="2"> Foo 2</MenuItem>
    </Select>
  );
}

We call makeStyles with an object that has the class name of as the root level properties.

We set the properties to an object that set the '&:before' and '&:after' properties to set the border color of the drop down.

Next, we set the icon color by setting the icon property to an object that sets the fill property to a color.

Then to apply the styles, we call the useStyles hook to return the classes object.

Then we et the className of the Select component to classes.select to set the select drop down’s border color.

And we set the inputProps to an object with the classes.icon property to set the icon’s color.

Now the arrow and bottom border should both be blue.

Conclusion

To change color a of Select component’s border and arrow icon with React Material UI, we can call the makeStyles function with an object that has the styles for the before and after pseudoselectors.

Sometimes, we want to set the background color of the Material UI drawer.

In this article, we’ll look at how to set the background color of the Material UI drawer.

How to set the background color of the Material UI drawer?

To set the background color of the Material UI drawer, we call the makeStyles function to create the styles.

Then we can apply the styles with the useStyles hook returned by makeStyles.

For instance, we write:

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  list: {
    width: 250
  },
  fullList: {
    width: "auto"
  },
  paper: {
    background: "blue"
  }
});

const DrawerWrapper = () => {
  const classes = useStyles();
  const [isOpen, setIsOpen] = useState();
  const sideList = (
    <div className={classes.list}>
      <List>
        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Left</Button>
      <Drawer
        classes={{ paper: classes.paper }}
        open={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <div
          tabIndex={0}
          role="button"
          onClick={() => setIsOpen(true)}
          classes={{ root: classes.root }}
        >
          {sideList}
        </div>
      </Drawer>
    </>
  );
};

export default function App() {
  return (
    <div>
      <DrawerWrapper />
    </div>
  );
}

We call makeStyles with an object that has the properties set to objects with the styles.

We set the background property to 'blue' to apply a blue background to a component.

Next, in DrawerWrapper, we call useStyles to return the classes object.

And we use that to make the Drawer‘s background blue by setting classes to { paper: classes.paper }.

We then add the content inside by putting sideList inside the div.

Conclusion

To set the background color of the Material UI drawer, we call the makeStyles function to create the styles.

Then we can apply the styles with the useStyles hook returned by makeStyles.