Creating a React component

The next thing to do is to create a React component to display the points.

Since this component will only be used in one place it should be created inside <theme-root>/pages/Product/components/Header/components

Inside this directory, create a new folder Loyalty and create a new file inside called index.jsx.

Add the following code to the newly created file:

<theme-root>/pages/Product/components/Header/components/index.jsx
import React from 'react';
import PropTypes from 'prop-types';

const Loyalty = ({ points }) => (
  points ? <div>Points: {points}</div>: null
);

Loyalty.propTypes = {
  points: PropTypes.number,
};

Loyalty.defaultProps = {
  points: 0,
};

export default Loyalty;