Category: React Answers

Categories
JavaScript Answers React React Answers

How to validate is either string or array of strings with Yup, React and JavaScript?

white and brown long coated small dog

Sometimes, we want to validate is either string or array of strings with Yup, React and JavaScript.

In this article, we’ll look at how to validate is either string or array of strings with Yup, React and JavaScript.

How to validate is either string or array of strings with Yup, React and JavaScript?

To validate is either string or array of strings with Yup, React and JavaScript, we can use the mixed and when methods.

For instance, we write:

import React from "react";
import * as yup from "yup";
import { Formik, Form, Field } from "formik";

const validationSchema = yup.object().shape({
  email: yup
    .mixed()
    .when("isArray", {
      is: Array.isArray,
      then: yup.array().of(yup.string()),
      otherwise: yup.string()
    })
    .required()
});

export default function App() {
  return (
    <Formik
      initialValues={{ email: "" }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="email" />
          {errors.email && touched.email ? <div>{errors.email}</div> : null}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

to add a form with the Formik and Form components.

We set the validationSchema prop to an object returned by object and shape to let us validate the value object.

We set the email property of the schema object to an object returned by mixed and when to add conditional validation.

And we set is to Array.isArray to check if email is an array.

If it’s true, then we validate that is an array of strings by setting then to yup.array().of(yup.string()).

Otherwise, we set the otherwise property to yup.string to validate that email is a string.

Conclusion

To validate is either string or array of strings with Yup, React and JavaScript, we can use the mixed and when methods.

Categories
JavaScript Answers React React Answers

How to set the height of a text area dynamically with JavaScript and React?

Seal lying on rock covered with snow

Sometimes, we want to set the height of a text area dynamically with JavaScript and React.

In this article, we’ll look at how to set the height of a text area dynamically with JavaScript and React.

How to set the height of a text area dynamically with JavaScript and React?

To set the height of a text area dynamically with JavaScript and React, we can set the height of the text area when we type into it.

For instance, we write:

import React from "react";

export default function App() {
  const handleKeyDown = (e) => {
    e.target.style.height = "inherit";
    e.target.style.height = `${e.target.scrollHeight}px`;
  };

  return <textarea onKeyDown={handleKeyDown} />;
}

to set the onKeyDown prop to the handleKeyDown function.

In it, we set the height of the text area to the e.target.scrollHeight, which is the height of the scrollable area.

As a result, the height of the text area should change to show all the text as we type into it.

Conclusion

To set the height of a text area dynamically with JavaScript and React, we can set the height of the text area when we type into it.

Categories
JavaScript Answers React Answers

How to add a background image into a React Component with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to add a background image into a React Component with JavaScript.

In this article, we’ll look at how to add a background image into a React Component with JavaScript.

How to add a background image into a React Component with JavaScript?

To add a background image into a React Component with JavaScript, we can set the backgroundImage CSS property.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div
      style={{
        width: 300,
        height: 300,
        backgroundImage: `url(https://picsum.photos/300/300)`
      }}
    ></div>
  );
}

We set backgroundImage to the URL of the image we want as the background image.

Therefore, we see the background image displayed.

Conclusion

To add a background image into a React Component with JavaScript, we can set the backgroundImage CSS property.

Categories
JavaScript Answers React Answers

How to fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript.

In this article, we’ll look at how to fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript.

How to fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript?

To fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript, we should call React.forwardRef with the function component that we want to assign the ref to.

For instance, we write:

import React from "react";

const Input = React.forwardRef(({ backgroundColor }, ref) => {
  return <input style={{ backgroundColor }} ref={ref} />;
});

export default function App() {
  const ref = React.useRef();

  React.useEffect(() => {
    ref.current.focus();
  }, []);

  return (
    <div>
      <Input backgroundColor="green" ref={ref} />
    </div>
  );
}

to create the Input function component and assign a ref to it.

We set the ref prop to the ref parameter in the Input component.

Then in App, we create a ref with the useRef hook and assign the ref prop to the ref.

And we call ref.current.focus in the useEffect callback.

Now the input should be focused when we load the page.

Conclusion

To fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript, we should call React.forwardRef with the function component that we want to assign the ref to.

Categories
JavaScript Answers React Answers

How to add the linear-gradient background style with React and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to add the linear-gradient background style with React and JavaScript.

In this article, we’ll look at how to add the linear-gradient background style with React and JavaScript.

How to add the linear-gradient background style with React and JavaScript?

To add the linear-gradient background style with React and JavaScript, we can set the style in the style prop.

For instance, we write:

import React from "react";

const somePic = "https://picsum.photos/200/300";

export default function App() {
  return (
    <div>
      <div
        style={{
          background: `linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic})`,
          width: 200,
          height: 300
        }}
      ></div>
    </div>
  );
}

to set the background property to linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic}) to set the background of the div to a gradient with an image.

Conclusion

To add the linear-gradient background style with React and JavaScript, we can set the style in the style prop.