Author: John Au-Yeung

Sometimes, we want to include Font Awesome icons in a React component’s render method.

In this method, we’ll look at how to include Font Awesome icons in a React component’s render method.

Include a Font Awesome Icon in React’s render()

To include Font Awesome icons in our React app, we can install the package by running:

npm install --save font-awesome

Then we can include the bundled CSS by writing:

import '../node_modules/font-awesome/css/font-awesome.min.css';

or:

import 'font-awesome/css/font-awesome.min.css';

And then in our component, we write:

render() {
    return <div><i className="fa fa-spinner fa-spin"></i></div>;
}

We set the class names for the icon as the value of the className prop.

There’s also the react-fontawesome package that lets us use icons by including the them bundled React components in our components.

To install it, we run:

npm install --save react-fontawesome

Then we import it by adding:

const FontAwesome = require('react-fontawesome');

Then we can use it by writing:

class App extends React.Component {
  render() {
    return (
      <FontAwesome
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

We use the FontAwesome component to add the icon.

Conclusion

There’s the react-fontawesome package that lets us use icons by including the them bundled React components in our components.

Sometimes, we want to get the browser history object with React Router.

In this article, we’ll look at how to get the browser history object with React Router.

Get History on react-router

We can get the history with React Royer by calling the createBrowserHistory method.

For instance, we can write:

import { Router } from 'react-router-dom'
import { createBrowserHistory } from 'history'
import App from './App'

const history = createBrowserHistory({
  //...
});

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)

We can also use the withRouter higher-order component to inject the history object into a component.

For instance, we can write:

import { withRouter } from 'react-router-dom';

class App extends React.Component {
  render () {
    this.props.history;
  }
}

withRouter(App);

We called withRouter with App to inject the history prop to it.

Then in our App component, we can get the history with this.props.history .

Conclusion

We can get the history with React Royer by calling the createBrowserHistory method.

Sometimes, we want to return multi-line JSX in another return statement.

In this article, we’ll look at how to return multi-line JSX in another return statement.

Return Multi-line JSX in a Return Statement in React

We can return multiple lines of JSX code in when we map them from an array by returning an array in the map callback.

For instance, we can write:

render() {
  return (
    {[1, 2, 3].map((n) => {
      return [
        <h3>Item {n}</h3>
        <p>{n}</p>
      ]
    }}
  );
}

We can also return a fragment to wrap around the components:

render() {
  return (
    {[1, 2, 3].map((n, index) => {
      return (
        <React.Fragment key={index}>
          <h3>Item {n}</h3>
          <p>{n}</p>
        </React.Fragment>
      )
    }}
  );
}

Conclusion

We can return multiple lines of JSX code in when we map them from an array by returning an array in the map callback.

Sometimes, we want to fetch data when a React component’s prop changes value.

In this article, we’ll look at how to fetch data when a React component’s prop changes value..

How to Fetch Data When a React Component Prop Changes

To fetch data when a React component changes, we can add the componentDidUpdate method to our class component.

It takes a parameter for the previous prop value.

We can use that to compare with the current prop value to determine if we want to fetch data or not.

If they’re different, then we do the fetching.

For instance, we can write:

class App extends Component {
  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.params.id !== this.props.params.id) {
      this.fetchData();
    }
  }

  fetchData() {
    this.props.fetchData(this.props.params.id);
  }
}

We have the componentDidUpdate method that has the prevProps parameter.

We compare the id from prevProps to the id in the current prop to determine if we want to call fetchData .

Conclusion

To fetch data when a React component changes, we can add the componentDidUpdate method to our class component.

It takes a parameter for the previous prop value.

We can use that to compare with the current prop value to determine if we want to fetch data or not.

Sometimes, we want to create a custom function in a React component.

In this article, we’ll look at how to create a custom function in a React component.

Creating a Custom Function in React Component

We can create a custom function within a React component.

For instance, we can write:

class App extends React.Component {

  log(message) {
    console.log(message);
  }

  handleClick(e) {
    this.log("button clicked");
  }

  componentDidMount() {
    this.log("component mounted");
  }

  render() {
    return <button onClick={this.handleClick.bind(this)}>click me</button>;
    }
}

We have the log method that runs console.log .

We can call it from other method with this.log .

Conclusion

We can create a custom function within a React component.