CODEWITHSUNDEEP
javascriptreactjsecmascript-6arrow-functions
Creeper
Creeper

Reputation: 386

Why are arrow functions in reactjs sometimes treated as components?

I'm learning reactJS at the moment and I'm finding it hard to understand why are arrow functions in reactjs sometimes treated as components and sometimes just as normal arrow functions.

In this example:

    class CommentListContainer extends React.Component {
      state = { comments : [] };
      componentDidMount() {
        fetchSomeComments(s => // 1- here fetchSomeComments is treated as a normal arrow function
          this.setState({ comments: s }));
      }
      render() {
        return <CommentList comments={this.state.comments} />; // 2- here CommentList is treated as a component
      }
    }

    // 1

    const fetchSomeComments = cb =>
      cb([
        { author: "Chan", body: "You look nice today." },
        { author: "You", body: "I know, right?!" }
      ]);

    // 2

    const CommentList = comments =>
      <ul>
        {
          comments.comments.map(
            (c, index) => (
            <li key = {index}>{c.body}—{c.author}</li>
            )
          )
        }
      </ul>

I would like to understand this, and also if CommentList is a component how can it be written as a class with a constructor(props)?

Upvotes: 2

Views: 1191

Answers (2)

Udaya Prakash
Udaya Prakash

Reputation: 541

An arrow function in ReactJS is considered either as a functional component or just an arrow function depending on what they return.

const CommentList = comments =>
      <ul>
        {
          comments.comments.map(
            (c, index) => (
            <li key = {index}>{c.body}—{c.author}</li>
            )
          )
        }
      </ul>

The above component is called a stateless component. It does nothing but render the props. There is no states, hooks etc.

But the components that can be stateful are made possible with react hooks. That is, a functional component can just do everything that a class component does. It can render states perform operations and not just return only JSX (like a stateless component)

To understand this in detail, take a look at React Function Component

To make CommentList a class component, the following can be done:

class CommentList extends React.Component {
    constructor(props) {
         super(props);
    }

    render () {
      /* destructuring props so that we can use "comments" prop directly instead of
      using this.props.comments */
      const {comments}=this.props; 

      return (
        <ul>
          {comments.comments.map((c, index) => (
            <li key={index}>
              {c.body}—{c.author}
            </li>
          ))}
        </ul>
      );
    }
}

TLDR; Difference between a normal arrow function and a functional component is the return type i.e a functional component returns JSX.

Upvotes: 2

tanpopo
tanpopo

Reputation: 38

class CommentList extends React.Component {
  construct(props) {
    super(props);
  }
  render() {
    let list_items = [];
    for(let c of this.props.comments) {
        list_items.push(<li key = {index}>{c.body}—{c.author}</li>);
    }
    return (
      <ul>{list_items}</ul>
    );
  }
}

function CommentList(props) {
    let list_items = [];
    for(let c of props.comments) {
        list_items.push(<li key = {index}>{c.body}—{c.author}</li>);
    }
    return (<ul>{list_items}</ul>);
}

They are the same in React, the second one is called "function components". React doc

Upvotes: 1

Related Questions