Refactor a React component from function to ES6 class

Question

I'm new to ES6. Got a bit confused on different ways to write a React component. I started with a "React.createClass" then moved to "extends React.Component" with ES6 classes syntax.

Following Redux tutorial now I see they define components in this way

import React, { PropTypes } from 'react'

const Todo = ({ onClick, completed, text }) => (
    <li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }} >
        {text}
    </li>
)

Todo.propTypes = {
    onClick: PropTypes.func.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
}

export default Todo

How can I refactor this "function" moving to a ES6 class which extends React.component? I guess the return JSX is the render() method, isn't it? What about onClick, completed, text arguments?

Thank you

vhs · Accepted Answer · 2021-04-21 07:28:23Z

4

For your component is actually best to make it a pure function, rather than an ES6 class, because it can render as a function of its props and does not maintain state. You can still use ES6 syntax though (exporting, arrow functions, etc.).

Facebook's explanation: "In an ideal world, most of your components would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible."

import { PropTypes } from 'react'

function Todo = (props) => (
    <li onClick={props.onClick} style={{ textDecoration: props.completed ? 'line-through' : 'none' }} >
        {props.text}
    </li>
)

Todo.propTypes = {
    onClick: PropTypes.func.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
}

export default Todo

edited Apr 21, 2021 at 7:28

vhs

10.2k3 gold badges73 silver badges78 bronze badges

answered Jul 7, 2016 at 18:29

bogeylicious

5,1803 gold badges27 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Spencer Judd Over a year ago

This is exactly what should be done. Just because you can write a component as an ES6 class doesn't mean that all components should be classes.

Marcel Mandatory Over a year ago

I am supporting your solution. I did no know that you can do not have to use PropTypes.shape for props in component.

holografix Over a year ago

Avoid answering questions with: "The best way to do X is like ABC, therefore here is ABC" - He wanted an ES6 version of the pure function version, NOT a repeat of the exact problem he was referring to.

secan Over a year ago

Shouldn't it be const Todo = ... (or function Todo(props) { ... }) instead of function Todo = ...?

ctrlplusb · Accepted Answer · 2016-07-13 14:40:40Z

4

The ES6 syntax equivalent would be:

import React, { Component, PropTypes } from 'react'

class Todo extends Component {
  render() {
    const { onClick, completed, text } = this.props

    return (
      <li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }} >
          {text}
      </li>
    )
  }
}
Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

export default Todo

If you are using babel to transpile your code and you have the class properties transform then you can do the following:

import React, { Component, PropTypes } from 'react'

class Todo extends Component {
  static propTypes = {
    onClick: PropTypes.func.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }

  render() {
    const { onClick, completed, text } = this.props

    return (
      <li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }} >
          {text}
      </li>
    )
  }
}

export default Todo

Just to be clear this second example cannot be considered "standard ES6", however I find the static properties so much cleaner so I thought it was worth showing this approach too.

edited Jul 13, 2016 at 14:40

answered Jul 7, 2016 at 16:20

ctrlplusb

13.2k7 gold badges58 silver badges57 bronze badges

1 Comment

Bergi Over a year ago

The OP asked for an ES6 class, your answer is a syntax error.

vhs · Accepted Answer · 2021-04-21 07:59:39Z

Moving beyond ES6 into TypeScript, for React version 17 and above you can do:

import type { FC } from "react";

interface TodoProps {
  onClick: () => void;
  hasCompleted: () => boolean;
  text: string;
}

const Todo: FC<TodoProps> = ({ onClick, hasCompleted, text }) => (
  <li
    onClick={onClick}
    style={{ textDecoration: hasCompleted ? "line-through" : "none" }}
  >
    {text}
  </li>
);

export default Todo;

If you don't want implicit children you can drop the import type line and rewrite like:

const Todo = ({ onClick, hasCompleted, text }: TodoProps) => (

If you do, however, you'll also need to add children to the type declaration and spend time trying to figure out how it should be typed—not necessary if using FC as children are assumed.

For more info on declaring Functions in TypeScript visit More on Functions in the TypeScript docs.

Collectives™ on Stack Overflow

Refactor a React component from function to ES6 class

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related