Category: React

Sometimes, we want to set a value for TextField from Material UI with React.

In this article, we’ll look at how to set a value for TextField from Material UI with React.

How to set a value for TextField from Material UI with React?

To set a value for TextField from Material UI with React, we set the value prop of the TextField to a state value.

And we set the onChange prop to a function that sets the state to a the value that’s inputted.

For instance, we write:

import * as React from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

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

  return (
    <div>
      <TextField value={value} onChange={(e) => setValue(e.target.value)} />
      <Button onClick={() => setValue("")}>Reset Text</Button>
    </div>
  );
}

We call the useState hook to create the value state and the setValue function to set the value state’s value.

Next, we set the value prop of the TextField to the value prop.

And we set the onChange prop of the TextField to a function that calls setValue with e.target.value.

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

Next, we add a Button that has the onClick prop set to a function that calls setValue with an empty string to let us clear the input by clicking the button.

Conclusion

To set a value for TextField from Material UI with React, we set the value prop of the TextField to a state value.

And we set the onChange prop to a function that sets the state to a the value that’s inputted.

Sometimes, we want to conditionally activate a React Material UI tooltip.

In this article, we’ll look at how to conditionally activate a React Material UI tooltip.

How to conditionally activate a React Material UI tooltip?

To conditionally activate a React Material UI tooltip, we can set the title prop of the Tooltip to an empty string.

For instance, we write:

import * as React from "react";
import Tooltip from "@material-ui/core/Tooltip";
import Button from "@material-ui/core/Button";

const MyButton = ({ text }) => (
  <Tooltip title={text}>
    <Button>Do action</Button>
  </Tooltip>
);

export default function App() {
  return (
    <div>
      <MyButton text="hello world" />
      <MyButton text="" />
    </div>
  );
}

We create the MyButton component that takes the text prop.

And it renders a Tooltip with the Button to activate the tooltip.

Next, we render the MyButton component with text set to 'hello world' and another with text set to an empty string.

Only when we hover over the one with the text prop set to 'hello world' we’ll see the tooltip show with ‘hello world’.

When we hover over the 2nd one, we get nothing.

Conclusion

To conditionally activate a React Material UI tooltip, we can set the title prop of the Tooltip to an empty string.

Sometimes, we want to center a button in React Material UI.

In this article, we’ll look at how to center a button in React Material UI.

How to center a button in React Material UI?

To center a button in React Material UI, we can put the button in a Grid component.

And we set the justify prop of the Grid to 'center' and we set the container prop to true.

For instance, we write:

import * as React from "react";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <div>
      <Grid container justify="center">
        <Button color="primary" size="large" type="submit" variant="contained">
          Sign Up
        </Button>
      </Grid>
    </div>
  );
}

to add the Grid prop with the container and justify props.

We set justify to 'center' to center the items inside.

Next, we add the Button inside the Grid.

As a result, we should see that the Button is centered.

Conclusion

To center a button in React Material UI, we can put the button in a Grid component.

And we set the justify prop of the Grid to 'center' and we set the container prop to true.

Sometimes, we want to mask a React Material-UI TextField.

In this article, we’ll look at how to mask a React Material-UI TextField.

How to mask a React Material-UI TextField?

To mask a React Material-UI TextField, we can use the react-input-mask package.

We install it by running npm i react-input-mask.

Then, we write:

import * as React from "react";
import TextField from "@material-ui/core/TextField";
import InputMask from "react-input-mask";

export default function App() {
  const [phone, setPhone] = React.useState();
  console.log(phone);

  return (
    <div>
      <InputMask
        mask="(0)999 999 99 99"
        value={phone}
        disabled={false}
        maskChar=" "
        onChange={(e) => setPhone(e.target.value)}
      >
        {() => <TextField />}
      </InputMask>
    </div>
  );
}

to add the InputMask component to add the input mask.

We render the Material UI TextField by using () => <TextField /> as the render prop of InputMask.

Next, we set the mask prop to the mask we want.

And we set onChange and value to set and get the input value respectively.

Conclusion

To mask a React Material-UI TextField, we can use the react-input-mask package.

We install it by running npm i react-input-mask.

Sometimes, we want to create a React Material UI dialog with a transparent background color.

In this article, we’ll look at how to create a React Material UI dialog with a transparent background color.

How to create a React Material UI dialog with a transparent background color?

To create a React Material UI dialog with a transparent background color, we set the BackdropProps prop to an object that has the invisible property set to true.

For instance, we write:

import * as React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";

export default function App() {
  return (
    <div>
      <Dialog open BackdropProps={{ invisible: true }}>
        <DialogContent>
          <DialogContentText>hello world</DialogContentText>
        </DialogContent>
      </Dialog>
    </div>
  );
}

We set the BackdropProps to { invisible: true } to remove the overlay from the dialog box.

Now the background should be transparent.

Conclusion

To create a React Material UI dialog with a transparent background color, we set the BackdropProps prop to an object that has the invisible property set to true.