Category: React Answers

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.

Sometimes, we want to use react-datepicker with React hooks forms.

In this article, we’ll look at how to use react-datepicker with React hooks forms.

How to use react-datepicker with React hooks forms?

To use react-datepicker with React hooks forms, we can wrap it in the Controller component.

For instance, we write:

import React from "react";
import { Controller, useForm } from "react-hook-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const {
    handleSubmit,
    watch,
    control,
    formState: { errors }
  } = useForm();
  const onSubmit = (data) => console.log(data);

  console.log(watch("dateInput"));

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="dateInput"
        render={({ field }) => (
          <DatePicker
            placeholderText="Select date"
            onChange={(date) => field.onChange(date)}
            selected={field.value}
          />
        )}
      />
      {errors.dateInput && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}

We call the useForm hook to return an object with various properties we use to add the date picker into the form.

Next, we add the Controller component in the form.

We set the control prop to control and we set the render prop to a function that renders the DatePicker component.

Then we set onChange to a function that calls field.onChange to set the value of the date picker.

And we render the value by setting the selected prop to field.value.

Conclusion

To use react-datepicker with React hooks forms, we can wrap it in the Controller component.