Category: React Answers

Sometimes, we want to fix window is not defined in Next.js React app.

In this article, we’ll look at how to fix window is not defined in Next.js React app.

How to fix window is not defined in Next.js React app?

To fix window is not defined in Next.js React app, we check if window is undefined.

For instance, we write

if (typeof window !== "undefined") {
  // ...
}

to check if window isn’t undefined.

If it’s not, then we can run client side code safely by putting the code in the if block.

Conclusion

To fix window is not defined in Next.js React app, we check if window is undefined.

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.