Category: React

Sometimes, we want to fix the select value is always out of range error with React Material UI.

In this article, we’ll look at how to fix the select value is always out of range error with React Material UI.

How to fix the select value is always out of range error with React Material UI?

To fix the select value is always out of range error with React Material UI, we should make sure the value is a primitive value or the same object reference of the object as the selected value.

For instance, we write:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

const followers = [
  { "0-50k": [0, 50000] },
  { "50k-100k": [50001, 100000] },
  { "100k-250k": [100001, 250000] },
  { "250k-500k": [250001, 500000] },
  { "500k-750k": [500001, 750000] },
  { "+1M": [750001, Number.MAX_SAFE_INTEGER] }
];

export default function App() {
  const [value, setValue] = React.useState("");
  const handleChange = (event) => setValue(event.target.value);

  return (
    <div>
      <Select
        fullWidth
        id="followers"
        labelId="followersL"
        margin="dense"
        displayEmpty
        name="followers"
        onChange={handleChange}
        value={value}
        variant="outlined"
      >
        {followers.map((element) => {
          const [[key, val]] = Object.entries(element);
          return (
            <MenuItem value={val} key={key}>
              {key}
            </MenuItem>
          );
        })}
      </Select>
    </div>
  );
}

to render the MenuItem by calling followers.map with a function that takes the key and val from each element entry with Object.entries.

Then we set the value prop of MenuItem to val.

And the key is used as the value of the key prop and it’s also displayed as the text of the choice to the user.

Then to get the selected value and display it, we set the onChange prop to handleChange and the value prop to value.

We call setValue with event.target.value in handleChange to set the value state to the selected choice, which is the MenuItem‘s value prop’s value.

Conclusion

To fix the select value is always out of range error with React Material UI, we should make sure the value is a primitive value or the same object reference of the object as the selected value.

Sometimes, we want to style text inside the ListItemText component with React Material UI.

In this article, we’ll look at how to style text inside the ListItemText component with React Material UI.

How to style text inside the ListItemText component with React Material UI?

To style text inside the ListItemText component with React Material UI, we can use the Typography component.

For instance, we write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <div>
      <List dense>
        <ListItem>
          <ListItemText
            primary={
              <Typography variant="h1" style={{ color: "green" }}>
                hello world
              </Typography>
            }
          />
        </ListItem>
      </List>
    </div>
  );
}

We set the primary prop of the ListItemText component to the Typography component to let us custom the text styles.

We set the variant prop to the tag name of the element we want to render.

And we set the style prop to the styles we want for the text.

As a result, we should see a h1 element rendered with the text being ‘hello world’ and the text is green.

Conclusion

To style text inside the ListItemText component with React Material UI, we can use the Typography component.

To make a React Material UI Raised Button link to an external URL, we can add a Button that has the variant prop set to contained.

Then we set the href prop of the button to the URL we want to go to.

For instance, we write:

import React from "react";
import Button from "@material-ui/core/Button";
export default function App() {
  return (
    <div>
      <Button variant="contained" href="https://example.com">
        Yahoo
      </Button>
    </div>
  );
}

to add a Button with the variant prop set to 'contained' to add a raised button.

And we set the href prop to 'https://example.com' to make the button go to https://example.com when we click it.

Sometimes, we want to set a height of a dialog in React Material UI.

In this article, we’ll look at how to set a height of a dialog in React Material UI.

How to set a height of a dialog in React Material UI?

To set a height of a dialog in React Material UI, we can set the classes prop of the dialog to an object that has the paper property set to a class that has the height style.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";

const useStyles = makeStyles(() => ({
  dialog: {
    height: 500
  }
}));

export default function App() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open alert dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        classes={{ paper: classes.dialog }}
      >
        <DialogTitle>Use Google's location service?</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Let Google help apps determine location. This means sending
            anonymous location data to Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Disagree
          </Button>
          <Button onClick={handleClose} color="primary" autoFocus>
            Agree
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

We call makeStyles with a function that returns an object with the dialog property.

It’s set to an object with the height set to 500 pixels.

Next, we add a Button that opens the dialog.

And then we add the Dialog itself with the classes prop set to { paper: classes.dialog } to apply the styles in the classes.dialog class.

We call useStyles to return the classes.

Now we should see that the height of the dialog is 500px.

Conclusion

To set a height of a dialog in React Material UI, we can set the classes prop of the dialog to an object that has the paper property set to a class that has the height style.

Sometimes, we want to set the TextField height React Material UI.

In this article, we’ll look at how to set the TextField height React Material UI.

How to set the TextField height React Material UI?

To set the TextField height React Material UI, we can set the InputProps prop of the TextField to an object that has the classes property.

For instance, we write:

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

const useStyles = makeStyles(() => ({
  input1: {
    height: 50
  },
  input2: {
    height: 200,
    fontSize: "3em"
  }
}));

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

  return (
    <div className="App">
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: classes.input1 } }}
      />
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: classes.input2 } }}
      />
    </div>
  );
}

to call makeStyles with a function that returns an object with the classes with height styles.

Then we call useStyles to return the classes.

Next, we set InputProps to an object with the classes.input set to the classes we created with makeStyles to set the height of each TextField.

Conclusion

To set the TextField height React Material UI, we can set the InputProps prop of the TextField to an object that has the classes property.