Category: React Answers

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.

Sometimes, we want to disable a button when an input is empty with React.

In this article, we’ll look at how to disable a button when an input is empty with React.

How to disable a button when an input is empty with React?

To disable a button when an input is empty with React, we can set the input’s value as a state’s value.

Then we can use the state to conditionally disable the button when the state’s value is empty.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [name, setName] = useState();

  return (
    <div>
      <input onChange={(e) => setName(e.target.value)} />
      <button disabled={!name}>save</button>
    </div>
  );
}

to create the name state with the useState hook.

Then we add a text input element with its onChange prop set to a function that calls setName to set the input’s value as name‘s value.

e.target.value has the value of the input box.

Next, we add a button with the disabled prop set to !name to disable the button when the input box is empty.

Conclusion

To disable a button when an input is empty with React, we can set the input’s value as a state’s value.

Then we can use the state to conditionally disable the button when the state’s value is empty.