Author: John Au-Yeung

Sometimes, we want to clear browser cache in React.

In this article, we’ll look at how to clear browser cache in React.

Clear Browser Cache in React

To clear browser cache in React, we can add meta tags inside the head tag to make sure that the content of the page isn’t cached.

For instance, we put:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

in the head tag to set the cache-control response reader to no-cache.

And the expires response header is set to 0 to make sure nothing is cached.

Conclusion

To clear browser cache in React, we can add meta tags inside the head tag to make sure that the content of the page isn’t cached.

Sometimes, we want to write an else if structure using React JSX.

In this article, we’ll look at how to write an else if structure using React JSX.

Write an else if Structure Using React JSX

To write an else if structure using React JSX, we can write regular if-else statements in React components.

For instance, we write:

import React from "react";

const Condition = ({ conditionA, conditionB }) => {
  if (conditionA) {
    return <span>Condition A</span>;
  } else if (conditionB) {
    return <span>Condition B</span>;
  } else {
    return <span>Neither</span>;
  }
};

export default function App() {
  return (
    <>
      <Condition conditionA />
      <Condition conditionB />
      <Condition />
    </>
  );
}

to create the Condition component that takes the conditionA and conditionB props.

In the component, we check if conditionA is true, then we return a span with ‘Condition A’ as its content.

If conditionB is true, then we return a span with ‘Condition B’ as its content.

Otherwise, we return a span with ‘Neither’ as its content.

In App, we add Condition with the props.

Then we see:

Condition ACondition BNeither

displayed.

Conclusion

To write an else if structure using React JSX, we can write regular if-else statements in React components.

Sometimes, we want to get path params in React Router.

In this article, we’ll look at how to get path params in React Router.

Get Path Params in React Router

To get path params in React Router, we can use the useParams hook.

For instance, we write:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

const Child = () => {
  const { id } = useParams();

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
};

export default function App() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/1">foo</Link>
          </li>
          <li>
            <Link to="/2">bar</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id/" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

We create the Child component that calls the useParams hook to return an object with the route params in the URL.

And we render the value of the id param on the page.

In App, we have 2 links that goes to routes with different id param values.

To render Child when we click on the link, we add the Route in the Switch component.

And we set the path to /:id/. and children to Children.

:id is the route param placeholder, so id will be returned in useParams.

Conclusion

To get path params in React Router, we can use the useParams hook.

Sometimes, we want to draw a red horizontal line in React.

In this article, we’ll look at how to draw a red horizontal line in React.

Draw a Red Horizontal Line in React

To draw a red horizontal line in React, we can add an hr element that has a height and background color.

For instance, we write:

import React from "react";

const ColoredLine = ({ color }) => (
  <hr
    style={{
      color,
      backgroundColor: color,
      height: 5
    }}
  />
);
export default function App() {
  return (
    <div>
      <ColoredLine color="red" />
    </div>
  );
}

We create the ColoredLine component that takes the color prop.

And we set the style prop to an object with the color, backgroundColor and the height properties.

backgroundColor makes the line set to color.

Now we should see the line displayed.

Conclusion

To draw a red horizontal line in React, we can add an hr element that has a height and background color.

Sometimes, we want to add a background image in React component.

In this article, we’ll look at how to add a background image in React component.

Add a Background Image in React Component

To add a background image in React component, we can set the backgroundImage property of the object we set as the value of the style prop.

For instance, we write:

import React from "react";

const styles = {
  height: 300,
  backgroundImage: `url(${"https://blog.prezi.com/wp-content/uploads/2019/03/water_ripple-1024x683.jpg"})`
};

export default function App() {
  return <div style={styles}></div>;
}

We have the styles object with the backgroundImage property set to a URL of the background image we want to show.

Then we set the styles prop to the styles object.

Now we see the background image displayed.

Conclusion

To add a background image in React component, we can set the backgroundImage property of the object we set as the value of the style prop.