Category: React

To fix the ESLint Error ‘Unexpected block statement surrounding arrow body; move the returned value immediately after the =>’ with React, we use parentheses for the arrow function body if all we do is return a value.

For instance, we write

this.state.items.map((item) => (
  <div key={item}>
    <a href={item.mainContact.phoneHref + item.mainContact.phone}>
      <i className="fa fa-phone" />
      <strong>{item.mainContact.phone}</strong>
    </a>
  </div>
));

to call map with a function that returns a div.

We surround the div with parentheses so we return the div implicitly.

Sometimes, we want to fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript.

In this article, we’ll look at how to fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript.

How to fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript?

To fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript, we pass in the type to the useRef hook.

For instance, we write

import React, { useRef } from "react";

const Test = () => {
  const node = useRef<HTMLDivElement>(null);

  if (node?.current?.contains()) {
    console.log("current accessed");
  }

  return <div ref={node}></div>;
};

to call useRef to return the node ref.

Then we assign node as the value of the div’s ref prop.

And then we can access the div with node?.current.

Conclusion

To fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript, we pass in the type to the useRef hook.

To destructure object and ignore one of the results with React, we can use the rest operator.

For instance, we write

const { styles, ...otherProps } = this.props;
const section = cloneElement(this.props.children, {
  className: styles.section,
  ...otherProps,
});

to get the otherProps object by destructuring.

otherProps has all the properties of this.props except styles.

Then we can use otherProps by spreading it in the object we call cloneElement with.

To align a component to the right with MUI React, we set the Grid component’s justifyContent prop to flex-end.

For instance, we write

<Grid container justifyContent="flex-end">
  <Button>Example</Button>
</Grid>

to set the Grid component’s justifyContent prop to flex-end to align the Button inside to the right.

To show warnings instead of errors on all ESLint rules with React, we set each rule to 'warm' in .eslintrc.

For instance, we write

{
  "rules": {
    //...
    "prettier/prettier": "warn"
  }
}

to set "prettier/prettier" to "warn' in "rules' to make ESLint return a warning instead of an error when the rule is violated.