Category: React

Sometimes, we want to run the Formik setSubmitting outside the submit handler with React.

In this article, we’ll look at how to run the Formik setSubmitting outside the submit handler with React.

How to run the Formike setSubmitting() outside the submit handler with React?

To run the Formik setSubmitting outside the submit handler with React, we can get the setSubmitting function from the render prop parameter and call it.

For instance, we write:

import React from "react";
import { Formik } from "formik";

export default function App() {
  return (
    <div>
      <Formik
        ref={formikRef}
        initialValues={{ email: "", password: "" }}
        validate={(values) => {
          const errors = {};
          if (!values.email) {
            errors.email = "Required";
          } else if (
            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
          ) {
            errors.email = "Invalid email address";
          }
          return errors;
        }}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 400);
        }}
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
          setSubmitting
        }) => (
          <form onSubmit={handleSubmit}>
            <input
              type="email"
              name="email"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
            />
            {errors.email && touched.email && errors.email}
            <input
              type="password"
              name="password"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.password}
            />
            {errors.password && touched.password && errors.password}
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
            <button type="button" onClick={() => setSubmitting(false)}>
              reset
            </button>
          </form>
        )}
      </Formik>
    </div>
  );
}

We create a simple form with the Formik component.

We set the initial form values with initialValues.

And we set the validate prop to a function that checks the entered values, which are obtained from the values parameter.

The onSubmit prop is set to the form submit event handler.

We set the render prop to a function that returns a form.

We set the onSubmit prop to handleSubmit to run the function that we set as the value of the onSubmit prop.

From the render prop function, we get the setSubmitting function from the prop object parameter.

And we use handleBlur as the value of onBlur and the properties from values as the value of the value prop of the inputs.

The properties in values is determined by the value of the name attribute of each input.

Then we call that in the click event handler that we set as the value of the onClick prop of the reset button.

Conclusion

To run the Formik setSubmitting outside the submit handler with React, we can get the setSubmitting function from the render prop parameter and call it.

Sometimes, we want to add SCSS styles to a React project.

In this article, we’ll look at how to add SCSS styles to a React project.

How to add SCSS styles to a React project?

To add SCSS styles to a React project, we can install the sass package if the React project is created with create-react-app.

To install it, we run:

npm install --save-dev sass

or

yarn add -D sass

Then we import a SCSS file by writing:

import '../scss/styles.scss';

We can rename all *.css files to *.scss to convert CSS files to SCSS files.

Conclusion

To add SCSS styles to a React project, we can install the sass package if the React project is created with create-react-app.

Sometimes, we want to fix the HTML special character (& symbol) not rendering issue in a React component.

In this article, we’ll look at how to fix the HTML special character (& symbol) not rendering issue in a React component.

How to fix the HTML special character (& symbol) not rendering issue in a React component?

To fix the HTML special character (& symbol) not rendering issue in a React component, we can use the dangerouslySetInnerHTML prop.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: "&" }}></div>
    </>
  );
}

to set dangerouslySetInnerHTML to an object with the __html property set to a string with the '&' character set.

Therefore, we should see ‘&’ rendered.

Conclusion

To fix the HTML special character (& symbol) not rendering issue in a React component, we can use the dangerouslySetInnerHTML prop.

Sometimes, we want to add active class using React styled-components.

In this article, we’ll look at how to add active class using React styled-components.

How to add active class using React styled-components?

To add active class using React styled-components, we can add props to the component.

For instance, we write:

import React from "react";
import styled, { keyframes, css } from "styled-components";

const pulse = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;

const Button = styled.button`
  animation: ${(props) =>
    props.active
      ? css`
          ${pulse} 0.5s linear
        `
      : "none"};
`;
export default function App() {
  return (
    <>
      <Button animationLength="2s" active>
        hello
      </Button>
    </>
  );
}

We create the keyframes with the keyframes tag and a keyframe string.

Then we add the Button component with the styled.button tag.

We run the animation on the button only with the active prop is true by returning in props.active ? css ${pulse} 0.5s linear : "none" in the function.

Finally, we add the Button into App and set the animationLength and active props.

Now we should see animation in the button since we set the active prop to true.

Conclusion

To add active class using React styled-components, we can add props to the component.

Sometimes, we want to add favicon to the Helmet component in React.

In this article, we’ll look at how to add favicon to the Helmet component in React.

How to add favicon to the Helmet component in React?

To add favicon to the Helmet component in React, we can add the link tag with the favicon inside Helmet.

For instance, we write:

import React from "react";
import Helmet from "react-helmet";

export default function App() {
  return (
    <>
      <Helmet>
        <title>ABC</title>
        <link
          rel="icon"
          type="image/png"
          href="https://icons.duckduckgo.com/ip3/www.google.com.ico"
          sizes="16x16"
        />
      </Helmet>
    </>
  );
}

to add the link tag to add the favicon into our app inside the Helmet component.

Now we should see the favicon displayed

Conclusion

To add favicon to the Helmet component in React, we can add the link tag with the favicon inside Helmet.