Category: JavaScript

Sometimes, we want to set min or max attributes on TextField with type number.

In this article, we’ll look at how to set min or max attributes on TextField with type number.

How to set min or max attributes on TextField with type number?

To set min or max attributes on TextField with type number, we set the InputProps prop to an object that has the inputProps property which has the min and max properties.

For instance, we write:

import { TextField } from "material-ui";
import React, { useState } from "react";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

const min = -10;
const max = 10;

export default function App() {
  const [value, setValue] = useState(0);

  return (
    <MuiThemeProvider>
      <div>
        <TextField
          type="number"
          inputProps={{ min, max }}
          value={value}
          onChange={(e) => {
            if (e.target.value === "") {
              setValue(e.target.value);
              return;
            }
            const value = +e.target.value;
            if (value > max) {
              setValue(max);
            } else if (value < min) {
              setValue(min);
            } else {
              setValue(value);
            }
          }}
        />
      </div>
    </MuiThemeProvider>
  );
}

We set the onChange prop to a function that checks the input value, which is stored in e.target.value.

If e.target.value is an empty string, we call setValue to store the value so we can clear the input.

Otherwise, we convert e.target.value to a number with the + operator and assign the number to value.

If value is bigger than max, we call setValue with max to set value to max.

Similarly, we set value to min if value is less than min.

Otherwise, we call setValue with value to set the value state to value.

Also, we set the value prop to the value state so that we see the input value displayed in the text field.

Conclusion

To set min or max attributes on TextField with type number, we set the InputProps prop to an object that has the inputProps property which has the min and max properties.

Sometimes, we need to fix the "TypeError: Cannot read property ‘prepareStyles’ of undefined" error when developing React apps with Material UI.

In this article, we’ll look at how to fix the "TypeError: Cannot read property ‘prepareStyles’ of undefined" error when developing React apps with Material UI.

How to fix the "TypeError: Cannot read property ‘prepareStyles’ of undefined" error when developing React apps with Material UI?

To fix the "TypeError: Cannot read property ‘prepareStyles’ of undefined" error when developing React apps with Material UI, we should wrap our Material UI components with the MuiThemeProvider component.

For instance, we write:

import { TextField } from "material-ui";
import React from "react";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

export default function App() {
  return (
    <MuiThemeProvider>
      <div>
        <TextField
          onKeyPress={(e) => {
            if (e.key === "Enter") {
              console.log(e.target.value);
            }
          }}
        />
      </div>
    </MuiThemeProvider>
  );
}

to wrap the TextField with the MuiThemeProvider component.

This lets Material UI apply the styles provided by Material UI for the components inside the MuiThemeProvider component.

Conclusion

To fix the "TypeError: Cannot read property ‘prepareStyles’ of undefined" error when developing React apps with Material UI, we should wrap our Material UI components with the MuiThemeProvider component.

Sometimes, we want to get the Material UI TextField value when enter key is pressed in React.

In this article, we’ll look at how to get the Material UI TextField value when enter key is pressed in React.

How to get the Material UI TextField value when enter key is pressed in React?

To get the Material UI TextField value when enter key is pressed in React, we can set the onKeyPress prop of the TextField to a function that checks which key is pressed.

Then we can run the code we want when the key we’re checking for is pressed.

For instance, we write:

import { TextField } from "material-ui";
import React from "react";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

export default function App() {
  return (
    <MuiThemeProvider>
      <div>
        <TextField
          onKeyPress={(e) => {
            if (e.key === "Enter") {
              console.log(e.target.value);
            }
          }}
        />
      </div>
    </MuiThemeProvider>
  );
}

We set onKeyPress to a function that checks if the enter key is pressed by comparing 'Enter' against e.key.

If that’s true, then we log the TextField‘s value, which is stored in e.target.value.

Conclusion

To get the Material UI TextField value when enter key is pressed in React, we can set the onKeyPress prop of the TextField to a function that checks which key is pressed.

Then we can run the code we want when the key we’re checking for is pressed.

Sometimes, we want to use async and await inside a React functional component.

In this article, we’ll look at how to use async and await inside a React functional component.

How to use async and await inside a React functional component?

To use async and await inside a React functional component, we can define an async function inside the component and call it.

For instance, we write:

import axios from "axios";
import React, { useEffect, useState } from "react";

export default function App() {
  const [val, setVal] = useState();

  const getAnswer = async () => {
    const { data } = await axios("https://yesno.wtf/api");
    setVal(data.answer);
  };

  useEffect(() => {
    getAnswer();
  }, []);

  return <div>{val}</div>;
}

We defined the getAnswer async function that calls axios to make a GET request to the API endpoint we want.

Then we get the data property from the object returned with the promise to get the response data.

Next, we call getAnswer in the useEffect callback to call it when we mount the component.

Conclusion

To use async and await inside a React functional component, we can define an async function inside the component and call it.

Sometimes, we want to add a grid layout to a React Material UI app.

In this article, we’ll look at how to add a grid layout to a React Material UI app.

How to add a grid layout to a React Material UI app?

To add a grid layout to a React Material UI app, we can use the react-pure-grid library.

To install it, we wrun:

npm install react-pure-grid --save

Then we use it by writing:

import React from "react";
import { Container, Row, Col } from "react-pure-grid";

export default function App() {
  return (
    <Container>
      <Row>
        <Col xs={6} md={4} lg={3}>
          Hello world
        </Col>
      </Row>
      <Row>
        <Col xsOffset={5} xs={7}>
          Welcome
        </Col>
      </Row>
    </Container>
  );
}

Container is the grid container.

And we add Rows and Cols to add rows and columns respectively.

We set the width of the column given the breakpoint with xs, md, and lg, which stand for extra small, medium, and large respectively.

We can also add offsets for a given breakpoint.

For instance, we have xsOffset to add the number of columns to shift the column when the xs breakpoint is hit.

Conclusion

To add a grid layout to a React Material UI app, we can use the react-pure-grid library.