Category: React

Sometimes, we want to use React.forwardRef in a class based component.

In this article, we’ll look at how to use React.forwardRef in a class based component.

How to use React.forwardRef in a class based component?

To use React.forwardRef in a class based component, we render the class component in the forwardRef callback.

For instance, we write

class ElemComponent extends Component {
  render() {
    return <div ref={this.props.innerRef}>Div has a ref</div>;
  }
}

export default React.forwardRef((props, ref) => (
  <ElemComponent innerRef={ref} {...props} />
));

to call forwardRef with a callback that renders the ElemComponent class component.

We set the innerRef prop to ref.

And then we access the ref with this.props.innerRef.

Conclusion

To use React.forwardRef in a class based component, we render the class component in the forwardRef callback.

Sometimes, we want to avoid extra wrapping div in React.

In this article, we’ll look at how to avoid extra wrapping div in React.

How to avoid extra wrapping div in React?

To avoid extra wrapping div in React, we can use a fragment.

For instance, we write

const Comp = () => {
  //...
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
};

to wrap the components ChildA, ChildB and ChildC with React.Fragment to render ChildA, ChildB and ChildC together without wrapping them with an extra container element.

Conclusion

To avoid extra wrapping div in React, we can use a fragment.

Sometimes, we want to embed SVG into React.

In this article, we’ll look at how to embed SVG into React.

How to embed SVG into React?

To embed SVG into React, we can import the svg file with import.

For instance, we write

import chatSVG from "../assets/chat.svg";

to import the chat.svg file with import.

Then we add the chatSVG img element by writing

<img src={chatSVG} className="iconChat" alt="chat" />;

We set the src prop to chatSVG to load the SVG in our component.

Conclusion

To embed SVG into React, we can import the svg file with import.

Sometimes, we want to wait for setState to finish before triggering a function with React.js.

In this article, we’ll look at how to wait for setState to finish before triggering a function with React.js.

How to wait for setState to finish before triggering a function with React.js?

To wait for setState to finish before triggering a function with React.js, we call setState with a callback that runs after the state is updated as the 2nd argument.

For instance, we write

this.setState(
  {
    originId: input.originId,
    destinationId: input.destinationId,
    radius: input.radius,
    search: input.search,
  },
  this.findRoutes
);

to call setState with an object to update the states.

The 2nd argument is the this.findRoutes method that runs when we finished updating the states.

We call this.setState in a method to update the states.

Conclusion

To wait for setState to finish before triggering a function with React.js, we call setState with a callback that runs after the state is updated as the 2nd argument.

Sometimes, we want to force remounting on React components.

In this article, we’ll look at how to force remounting on React components.

How to force remounting on React components?

To force remounting on React components, we can set the key prop of the component to a new value.

For instance, we if we change

<Component key="1" />

to

<Component key="2" />

then the Component component will be remounted since key changed from 1 to 2.

Conclusion

To force remounting on React components, we can set the key prop of the component to a new value.