React Tips — Pass Props, Background Image, and Window Resize

React is a popular library for creating web apps and mobile apps.

In this article, we’ll look at some tips for writing better React apps.

Pass Props to Handler Component with React Router

We can pass props to the route handler component with render props.

For instance, we can write:

<Route path="/greeting/:name" render={(props) => <Greeting greeting="Hello, " {...props} />} />

Then we can define our Greeting component by writing:

class Greeting extends React.Component {
  render() {
    const { text, match: {params} } = this.props;
    const { name } = params;    return (
      <>
        <p>
          {text} {name}
        </p>
      </>
    );
  }
}

We pas in props from the parameter to the Greeting component.

Then we get the props from the this.props property in Greetings .

Then we can do whatever we want with it.

Rerender View on Browser Resize

We can watch for window resize with a hooked if we’re using function components.