Category: JavaScript

Sometimes, we want to get the value in the React Material-UI autocomplete.

In this article, we’ll look at how to get the value in the React Material-UI autocomplete.

How to get the value in the React Material-UI autocomplete?

To get the value in the React Material-UI autocomplete, we can get the selected values from the onChange callback.

For instance, we write:

import React from "react";
import { TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";

const top5Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 }
];

export default function App() {
  return (
    <div>
      <Autocomplete
        options={top5Films}
        getOptionLabel={(option) => option.title}
        onChange={(event, value) => console.log(value)}
        renderInput={(params) => (
          <TextField {...params} label="Label" variant="outlined" fullWidth />
        )}
      />
    </div>
  );
}

We add the Autocomplete from the @material-ui/lab module.

And we set the options prop to the top5films array to add the options for the autocomplete.

Next, we set getOptionLabel to a function that returns the title property from the object in the options array prop.

To get the value that we selected, we set the onChange prop to a function with the value parameter in the 2nd position.

Finally, we set the render component to a function that renders a TextField to render the input box for the autocomplete.

We spread the params as props of the TextField.

And we set the label and variant to the values we want.

As a result, when we select a value, we should see the selected object in the top5films array logged.

Conclusion

To get the value in the React Material-UI autocomplete, we can get the selected values from the onChange callback.

Sometimes, we want to change font size of text field in React Material UI.

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

How to change font size of text field in React Material UI?

To change font size of text field in React Material UI, we can set the InputProps and the InputLabelProps prop to set the font size of the input box and the input label respectively.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <TextField
        label="label"
        margin="normal"
        InputProps={{ style: { fontSize: 40 } }}
        InputLabelProps={{ style: { fontSize: 40 } }}
      />
    </div>
  );
}

to set InputProps and InputLabelProps to { style: { fontSize: 40 } } so that the input box and the label both have font size 40px.

Conclusion

To change font size of text field in React Material UI, we can set the InputProps and the InputLabelProps prop to set the font size of the input box and the input label respectively.

Sometimes, we want to fix the issue where Grid in Material UI causes horizontal scroll in React.

In this article, we’ll look at how to fix the issue where Grid in Material UI causes horizontal scroll in React.

How to fix the issue where Grid in Material UI causes horizontal scroll in React?

To fix the issue where Grid in Material UI causes horizontal scroll in React, we can remove all the padding from the child grid items within the container.

For instance, we write:

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { Typography, Grid } from "@material-ui/core";

const theme = createTheme({
  typography: {
    fontFamily: [
      "Nunito",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "sans-serif"
    ].join(",")
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={0}>
        <Typography variant="h3">hello world</Typography>
      </Grid>
    </ThemeProvider>
  );
}

to add the container prop to Grid to make it render as a container element.

Then we set the spacing prop to 0 to remove all spacing from the container element.

Now the container should stay in the page.

Conclusion

To fix the issue where Grid in Material UI causes horizontal scroll in React, we can remove all the padding from the child grid items within the container.

Sometimes, we want to change the font family of all React Material UI components.

In this article, we’ll look at how to change the font family of all React Material UI components.

How to change the font family of all React Material UI components?

To change the font family of all React Material UI components, we can call the createTheme function provided by Material UI to set the font styles for the theme.

Then we apply the theme with ThemeProvider to apply the styles to the whole app.

For instance, we write:

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";

const theme = createTheme({
  typography: {
    fontFamily: [
      "Nunito",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "sans-serif"
    ].join(",")
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h3">hello world</Typography>
    </ThemeProvider>
  );
}

We call createTheme with an object that has the typography.fontFamily property.

The property is set to a string with the font we want app to use and any fallback fonts comes after the main font.

Next, we add the ThemeProvider component with the theme prop set to theme to apply the theme styles, which includes the font styles.

And we can use the Typography to add text with the font we want.

Conclusion

To change the font family of all React Material UI components, we can call the createTheme function provided by Material UI to set the font styles for the theme.

Then we apply the theme with ThemeProvider to apply the styles to the whole app.

Sometimes, we want to add a link to a List with React Material UI.

In this article, we’ll look at how to add a link to a List with React Material UI.

How to add a link to a List with React Material UI?

To add a link to a List with React Material UI, we can set the href prop of a ListItem component.

For instance, we write:

import React from "react";
import { List, ListItem, ListItemText } from "@material-ui/core";

export default function App() {
  return (
    <div>
      <List>
        <ListItem button component="a" href="https://www.google.com">
          <ListItemText primary="Google" />
        </ListItem>
      </List>
    </div>
  );
}

We set the href prop of ListItem to a URL.

And we set the component prop to 'a' to render the list item as a link.

As a result, we should see a link rendered and it should go to https://www.google.com when we click on it.

Conclusion

To add a link to a List with React Material UI, we can set the href prop of a ListItem component.