Author: John Au-Yeung

Sometimes, we want to set HTML body element styles from within a React component.

In this article, we’ll look at how to set HTML body element styles from within a React component.

Set HTML body Element Styles from within a React Component

To set HTML body element styles from within a React component, we can set the document.body.style properties to the values we want.

For instance, we write:

import React, { useEffect } from "react";

export default function App() {
  useEffect(() => {
    document.body.style.backgroundColor = "yellow";

    return () => {
      document.body.style.backgroundColor = "white";
    };
  }, []);
  return <div>hello world</div>;
}

We set document.body.style.backgroundColor to the value we want in the useEffect hook so that it’s set to the value we want when the component is rendered.

And we set the 2nd argument of the hook to an empty array so that the background color is only set when the component is first rendered.

Also, we return a function that sets the background color when we unmount the component in the useEffect callback.

Now we should see the page has a yellow background.

Conclusion

To set HTML body element styles from within a React component, we can set the document.body.style properties to the values we want.

Sometimes, we want to transfer all props except one to a React component.

In this article, we’ll look at how to transfer all props except one to a React component.

Transfer All Props Except One to a React Component

To transfer all props except one to a React component, we can destructure the properties we want to pass into the child component with the rest syntax.

For instance, we write:

import React from "react";

const Foo = (props) => {
  return <div>{JSON.stringify(props)}</div>;
};

export default function App() {
  const props = { foo: 1, bar: 2, baz: 3 };
  const { foo, ...restProps } = props;

  return <Foo {...restProps} />;
}

We have a Foo component that renders the props object.

In App, we have the props object with some properties we want to pass to Foo as props.

We want to pass everything except the foo property.

To do this, we destructure props and put all properties except foo into the restProps object.

Then we pass the properties in restProps into Foo with the destructuring syntax.

Therefore, we should see {"bar":2,"baz":3} rendered.

Conclusion

To transfer all props except one to a React component, we can destructure the properties we want to pass into the child component with the rest syntax.

Sometimes, we want to validate input values with React.

In this article, we’ll look at how to validate input values with React.

Validate Input Values with React

To validate input values with React, we can use the react-hook-form library.

To install it, we run:

npm i react-hook-form

Then we can use it by writing:

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors }
  } = useForm();
  const onSubmit = (data) => console.log(data);

  console.log(watch("name"));

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="jane" {...register("firstName")} />
      <input {...register("lastName", { required: true })} />
      {errors.lastName && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}

We call the useForm hook to return an object with various properties.

And we use the register function to register the fields so that react-hook-form can do validation on the field.

We pass in the name of the field and an object with the validation options of the field.

To make a field required, we set the required property to true.

Then we can show the errors from the errors object.

The onSubmit function is the function that runs when the form values are all valid.

We call handleSubmit with onSubmit so that it only runs when the form values are valid.

handleSubmit returns a function that we can use as the event handler for the submit event of a form.

Now when we click Submit without the lastName field filled out, we should see an error message displayed.

Conclusion

To validate input values with React, we can use the react-hook-form library.

Sometimes, we want to render React components with promises inside.

In this article, we’ll look at how to render React components with promises inside.

Render React Components with Promises Inside

To render React components with promises inside, we can use the usePromise hook provided by the react-promise package.

To install it, we run:

npm i react-promise

Then we can use it by writing:

import React from "react";
import usePromise from "react-promise";

export default function App() {
  const { value, loading } = usePromise(Promise.resolve("hello world"));
  if (loading) {
    return null;
  }
  return <div>{value}</div>;
}

We call usePromise with a promise that resolves to 'hello world'.

It returns an object with the value and loading properties.

value is the resolved value of the promise.

loading is a boolean that indicates whether the promise is loading or not.

Conclusion

To render React components with promises inside, we can use the usePromise hook provided by the react-promise package.

Sometimes, we may run into the "Error: Parse Error: Expected corresponding JSX closing tag for input" error when developing React apps.

In this article, we’ll look at how to fix the "Error: Parse Error: Expected corresponding JSX closing tag for input" error when developing React apps.

Fix the "Error: Parse Error: Expected corresponding JSX closing tag for input" Error When Developing React Apps

To fix the "Error: Parse Error: Expected corresponding JSX closing tag for input" error when developing React apps, we should make sure the input element has a closing slash at the end.

For instance, we write:

import React from "react";

export default function App() {
  return <input />;
}

to add the slash before the closing bracket to close the input element.

Conclusion

To fix the "Error: Parse Error: Expected corresponding JSX closing tag for input" error when developing React apps, we should make sure the input element has a closing slash at the end.