How to fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React?

Sometimes, we want to fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React.

In this article, we’ll look at how to fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React.

How to fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React?

To fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React, we can destructure props from the props object parameter.

For instance, we write:

import React from "react";

const Table = ({ onBlur }) => {
  return (
    <table onBlur={onBlur}>
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>
            <input type="text" />
          </td>
        </tr>
      </tbody>
    </table>
  );
};

export default function App() {
  const onBlur = (e) => {
    if (!e.currentTarget.contains(e.relatedTarget)) {
      console.log("blur event");
    }
  };

  return (
    <div>
      <h1>Table</h1>
      <Table onBlur={onBlur} />
    </div>
  );
}

We define the Table component that takes the onBlur prop.

In the component, we get the onBlur prop value by destructuring it from the object we have as the parameter.

Then we set the onBlur function as the value of the onBlur prop.

Conclusion

To fix code to meet the ‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule in React, we can destructure props from the props object parameter.