Category: React

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.

Sometimes, we want to style components using makeStyles and still have lifecycle methods in Material UI.

In this article, we’ll look at how to style components using makeStyles and still have lifecycle methods in Material UI.

How to style components using makeStyles and still have lifecycle methods in Material UI?

To style components using makeStyles and still have lifecycle methods in Material UI, we should use the withStyles higher order component.

For instance, we write:

import React from "react";
import { withStyles } from "@material-ui/styles";
import Button from "@material-ui/core/Button";

const styles = (theme) => ({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px"
  }
});

class SpecialButton extends React.Component {
  render() {
    const { classes } = this.props;
    return <Button className={classes.root}>hello world</Button>;
  }
}

const StyledButton = withStyles(styles)(SpecialButton);

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

We create the styles function that returns an object with the styles we want to apply when we apply the classes.root class.

Next, we create the SpecialButton component that takes the classes prop that’s injected with the withStyles higher-order component and the styles function.

And then we set className of the button to classes.root to set the class attribute of the button to root.

Finally, we rendered the StyledButton that’s created with withStyles in App.

As a result, we should see a button with gradients on the screen.

Conclusion

To style components using makeStyles and still have lifecycle methods in Material UI, we should use the withStyles higher order component.

Sometimes, we want to add multiple classes in React Material UI using the classes props.

In this article, we’ll look at how to add multiple classes in React Material UI using the classes props.

How to add multiple classes in React Material UI using the classes props?

To add multiple classes in React Material UI using the classes props, we can use the classnames package.

To install it, we run:

npm i classnames

Then we can use it by writing:

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

const useStyles = makeStyles({
  container: {
    color: "blue"
  },
  yellow: {
    backgroundColor: "yellow"
  }
});

export default function App() {
  const classes = useStyles();
  return (
    <div className={classNames(classes.container, classes.yellow)}>
      hello world
    </div>
  );
}

We call makeStyles with an object with the class names as the property names.

And we set each property to an object with the CSS styles as the value.

Next, we call useStyles to return the classes object.

And then we call classnames with the 2 classes properties that we created with makeStyles.

As a result, we should see that the text is blue and the background color is yellow.

Conclusion

To add multiple classes in React Material UI using the classes props, we can use the classnames package.