Let's refactor our Confirm component to be a function component, in order to learn how to implement these:

1. Open Confirm.tsx and replace the class signature with the following:

const Confirm: React.SFC<IProps> = (props) => {
...
}

We define a function component using an arrow function, passing the props type in as a generic parameter.

We use stateless functional component (SFC) React.SFC to represent these type of components. 

Our component is now throwing several compilation errors. We'll resolve these in the next steps.

2. Function components don't have render methods. Instead, the function itself returns the JSX that should be rendered. So, let's change this part of our function by removing the render signature, and leaving the return statement as it was:

return (
  <div
    className={
      this.props.open
        ? "confirm-wrapper confirm-visible"
        : "confirm-wrapper"
    }
  >
      ...
  </div>
);

3. We need to change the event handlers to be arrow function constants, and access props directly rather than through this. We should also move these handlers above the return statement:

const handleCancelClick = () => {
 props.onCancelClick();
};

const handleOkClick = () => {
 props.onOkClick();
}; 

return ( ... )

4. We then reference the props and event handlers directly, rather than through this in our JSX:

<div
  className={
    props.open
      ? "confirm-wrapper confirm-visible"
      : "confirm-wrapper"
  }
>
  <div className="confirm-container">
    <div className="confirm-title-container">
      <span>{props.title}</span>
    </div>
    <div className="confirm-content-container">
      <p>{props.content}</p>
    </div>
    <div className="confirm-buttons-container">
      <button className="confirm-cancel" onClick=
       {handleCancelClick}>
        {props.cancelCaption}
      </button>
      <button className="confirm-ok" onClick={handleOkClick}>
        {props.okCaption}
      </button>
    </div>
  </div>
</div>

5. We also have a problem with the static defaultProps variable. We move this outside our function, and place it as an object literal under the function, as follows:

Confirm.defaultProps = {
  cancelCaption: "Cancel",
  okCaption: "Okay"
}

If we look at the running app, all the compilation errors should be resolved, and the app should be working as it was before.

The following code is a template for a function component. Our Confirm component should have a structure similar to this now:

import * as React from "react";

const ComponentName: React.SFC<IProps> = props => {
 const handler = () => {
 ...
 };

 return (
 <div>Our JSX</div>
 );
};
ComponentName.defaultProps = {
 ...
};

export default ComponentName;

So, function components are an alternative way to create components. In the next section, we'll look at how to add state to a function component.