Category: React

Sometimes, we want to toggle the boolean state of a React component.

In this article, we’ll look at how to toggle the boolean state of a React component.

How to toggle the boolean state of a React component?

To toggle the boolean state of a React component, we can call the state setter function with a function that returns the latest boolean value.

For instance, we write

const Comp = () => {
  const [check, setCheck] = useState(false);
  // ...
  const toggle = () => {
    setCheck((prevCheck) => !prevCheck);
  };

  //...
};

to create the check state in the Comp component.

Then we add the toggle function that calls setCheck with a function that returns the original value of the check state, which is prevCheck, negated to set check to the negated value of prevCheck.

Conclusion

To toggle the boolean state of a React component, we can call the state setter function with a function that returns the latest boolean value.

For instance, we write

Sometimes, we want to pass React component as props.

In this article, we’ll look at how to pass React component as props.

How to pass React component as props?

To pass React component as props, we can put the components between the parent component’s tags and then then access them in the parent component with the children prop.

For instance, we write

const Label = (props) => <span>{props.children}</span>;
const Tab = (props) => <div>{props.children}</div>;
const Page = () => (
  <Tab>
    <Label>Foo</Label>
  </Tab>
);

to add the Label and Tab components that take the children prop.

Then we define the Page component that renders the Label component in the Tab component.

As a result, a div with a span inside it with the Foo text should be rendered since the children component are replaced by the component between the opening and closing tags.

Conclusion

To pass React component as props, we can put the components between the parent component’s tags and then then access them in the parent component with the children prop.

Sometimes, we want to do a redirect to another route with React Router v6.

In this article, we’ll look at how to do a redirect to another route with React Router v6.

How to do a redirect to another route with React Router v6?

To do a redirect to another route with React Router v6, we can use the useNavigate hook.

For instance, we write

import React from "react";
import { useNavigate } from "react-router-dom";

const Comp = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/path/to/push");
  };

  return (
    <div>
      <button onClick={handleClick} type="button" />
    </div>
  );
};

export default Comp;

to call the useNavigate hook to return the navigate function.

Then we create the handleClick function that calls navigate with the path we want to go to.

Then we set onClick to handleClick to go to the path when we click on the button.

Conclusion

To do a redirect to another route with React Router v6, we can use the useNavigate hook.

Sometimes, we want to fix ESLint error missing in props validation with React

In this article, we’ll look at how to fix ESLint error missing in props validation with React.

How to fix ESLint error missing in props validation with React?

To fix ESLint error missing in props validation with React, we can add a comment or disable the rule globally with a config.

For instance, we write

/* eslint-disable react/prop-types */

to disable prop type check for the line immediately below the comment in our code.

Or we can add

{
  //...
  "rules": {
    "react/prop-types": "off"
  }
  //...
}

in .eslintrc to disable the prop type validation rule for the whole project.

Conclusion

To fix ESLint error missing in props validation with React, we can add a comment or disable the rule globally with a config.