Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
HTML

How to add a div that stays at the top while a web page scrolls?

yellow Labrador puppy on floor

Sometimes, we want to add a div that stays at the top while a web page scrolls

In this article, we’ll look at how to add a div that stays at the top while a web page scrolls

How to add a div that stays at the top while a web page scrolls?

To add a div that stays at the top while a web page scrolls, we set the position CSS property of the div to fixed.

For instance, we write:

<div>
  fixed
</div>

to add a div.

Then we make it fixed by writing:

div {
  top: 0;
  position: fixed
}

We set the top position of the div and the position to fixed to make the div stay at the top of the screen.

Conclusion

To add a div that stays at the top while a web page scrolls, we set the position CSS property of the div to fixed.

Categories
JavaScript Answers

How to pass an array into the JavaScript string fromCharCode method?

yellow labrador puppies in green plastic container

Sometimes, we want to pass an array into the JavaScript string fromCharCode method.

In this article, we’ll look at how to pass an array into the JavaScript string fromCharCode method.

How to pass an array into the JavaScript string fromCharCode method?

To pass an array into the JavaScript string fromCharCode method, we call String.fromCharCode method with with an array spread as the arguments of it.

For instance, we write:

const array = [72, 69, 76, 76, 79];
const chars = String.fromCharCode(...array)
console.log(chars)

to call String.fromCharCodewith thearray` entries as the arguments.

We unpacked array with the spread operator.

And then we assign the returned result to chars.

As a result, we get that chars is 'HELLO'.

Conclusion

To pass an array into the JavaScript string fromCharCode method, we call String.fromCharCode method with with an array spread as the arguments of it.

Categories
JavaScript Answers

How to convert result from JavaScript Date.now() to yyyy/MM/dd hh:mm:ss ffff format?

white and brown long coated small dog lying on white textile

Sometimes, we want to convert result from JavaScript Date.now() to yyyy/MM/dd hh:mm:ss ffff format.

In this article, we’ll look at how to convert result from JavaScript Date.now() to yyyy/MM/dd hh:mm:ss ffff format.

How to convert result from JavaScript Date.now() to yyyy/MM/dd hh:mm:ss ffff format?

To convert result from JavaScript Date.now() to yyyy/MM/dd hh:mm:ss ffff format, we can use moment.js.

For instance, we write:

const d = moment().format('YYYY/MM/D hh:mm:ss SSS')
console.log(d)

We get the current date time with moment().

Then we call format with 'YYYY/MM/D hh:mm:ss SSS' to return a string of the current date time in yyyy/MM/dd hh:mm:ss ffff format.

Therefore d is '2022/01/7 04:58:24 671'.

Conclusion

To convert result from JavaScript Date.now() to yyyy/MM/dd hh:mm:ss ffff format, we can use moment.js.

Categories
React Answers

How to use React Material UI’s Autocomplete component with Formik?

yellow Labrador puppy on floor

Sometimes, we want to use React Material UI’s Autocomplete component with Formik.

In this article, we’ll look at how to use React Material UI’s Autocomplete component with Formik.

How to use React Material UI’s Autocomplete component with Formik?

To use React Material UI’s Autocomplete component with Formik, we can call Formik’s setFieldValue function with the name prop value of the Autocomplete and the value that is selected.

For instance, we write:

import React from "react";
import { Formik, Form } from "formik";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Button from "@material-ui/core/Button";

const cities = [
  { name: "New York", value: 1, state: "NY" },
  { name: "San Francisco", value: 2, state: "CA" },
  { name: "Los Angeles", value: 3, state: "CA" }
];

export default function App() {
  return (
    <div>
      <Formik
        initialValues={{ cityId: 1 }}
        onSubmit={({ cityId }) => {
          console.log(cityId);
        }}
      >
        {({ handleChange, values, setFieldValue }) => (
          <Form>
            <Autocomplete
              id="cityId"
              name="cityId"
              options={cities}
              groupBy={(option) => option.state}
              getOptionLabel={(option) => option.name}
              style={{ width: 300 }}
              onChange={(event, value) => {
                setFieldValue("cityId", value.value);
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  onChange={handleChange}
                  margin="normal"
                  label="Cities"
                  fullWidth
                  value={values?.cityId}
                />
              )}
            />

            <Button variant="contained" color="primary" type="submit">
              Submit
            </Button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

We add the Form component with the Autocomplete component inside.

We set the onChange prop of the Autocomplete to a function that calls setFieldValue with the Autocomplete‘s name prop’s value and the value parameter.

The value parameter has the whole object that’s selected from cities.

Next, we set the getOptionLabel prop to return the property value to display in the options.

And we set the value prop of the TextField to the values?.cityId property to display the selected choice.

Then we set the onSubmit prop of the Formik component to a function that takes the object with submitted values as the parameter and logs the selected value.

As a result, when we select an item and click Submit, we see that the cityId value is set to the value property of the cities entry that’s selected.

Conclusion

To use React Material UI’s Autocomplete component with Formik, we can call Formik’s setFieldValue function with the name prop value of the Autocomplete and the value that is selected.

Categories
React Answers

How to invalidate a TextField in React Material UI?

white and brown long coated small dog

Sometimes, we want to invalidate a TextField in React Material UI.

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

How to invalidate a TextField in React Material UI?

To invalidate a TextField in React Material UI, we set the error and helperText props of the TextField to display the error message we want.

For instance, we write:

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

const phoneRegex = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/;

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

  const onChange = (event) => {
    if (event.target.value.match(phoneRegex)) {
      setErrorText("");
      setPhone(event.target.value);
    } else {
      setErrorText("invalid format");
    }
  };

  return (
    <div>
      <TextField
        label="Phone"
        name="phone"
        helperText={errorText}
        error={errorText}
        onChange={onChange}
        value={phone}
      />
    </div>
  );
}

We set the error prop to make the TextField‘s border red when we enter invalid input.

And we set the helperText prop to display the error text at the bottom.

We set the onChange prop to the onChange function.

It checks whether the ionputted value matches the pattern in the phoneRegex by calling event.target.value.match.

We call setErrorText to set the errorText to set the error message if needed.

And we call setPhone to set the phone state which we use as the value of the TextField‘s value prop to display the inputted value.

Therefore, when we enter invalid text, we see that the text field has a red border.

Conclusion

To invalidate a TextField in React Material UI, we set the error and helperText props of the TextField to display the error message we want.