React: change from class based components to functional based components

Question

This is a react beginners exercise so I'm looking for the simplest solution. I need to convert these 3 class components into functional components. I'm currently learning React so any helpful comments would also be appreciated. Thanks in advance!

APP.JS

import React from 'react'
import List from './components/List'


class DataArr extends React.Component {

  render() {

    const fruits = ["banana", "apple", "pear", "melon", "lemon"]

    return (
    <div className="DataArr">
      <List fruits={fruits}/>
    </div>
    )
}
}

export default DataArr;

LIST.JS

import React from "react";

import Item from "./Item"; 

class List extends React.Component {

  render() {

    return (
      <div>
        {this.props.fruits.map((fruit, index) => {
          return <Item key={index} fruit={fruit} />;
        })}
      </div>
    );
  }
}
export default List;

ITEM.JS

import React from 'react'
class Item extends React.Component{
    render() {

        return (
              <div>
                {this.props.fruit}
              </div>
        )
      }
    }
    export default Item;

Taghi Khavari · Accepted Answer · 2020-06-08T13:26:11.740

This is a step by step answer on How to Convert React Class Component to Functional Component which is nicer, cleaner and easier to read:

You need to change the class to a function
Remove render function
Remove this keyword
If you have state in your Class Component use hooks and in particular useState or useReducer hook
If you used lifecycle methods in your Class Component you can almost use useEffect hook in every situation. (just need to be comfortable with it which you can read more about it here and here)

App.js would be:


import React from 'react'
import List from './components/List'


// class DataArr extends React.Component { //<-- Remove this line
const DataArr = () => { // <-- Create a function Component
  // render() { // <-- remove render function because you don't need it
    const fruits = ["banana", "apple", "pear", "melon", "lemon"]
    return (
      <div className="DataArr">
        <List fruits={fruits}/>
      </div>
    )
// } // this curly brace is for render function
}

export default DataArr;

List.js would be:

import React from "react";

import Item from "./Item"; 

// class List extends React.Component { //<-- Remove this line

const List = (props) => {
// render() { // <-- remove render function because you don't need it
    return (
      <div>
        {
          // this.props.fruits.map((fruit, index) => { <-- Change this.props to props
          props.fruits.map((fruit, index) => {
          return <Item key={index} fruit={fruit} />;
        })}
      </div>
    );
  // } // this curly brace is for render function
}
export default List;

and the ITEM.js would be like this:

import React from 'react'
// class Item extends React.Component{ //<-- Remove this line
const Item = (props) => { // <-- Create a function Component
  // render() { // <-- remove render function because you don't need it
    return (
          <div>
            {
              // this.props.fruit // <-- change this.props to props
              props.fruit
            }
          </div>
    )
}
// } // this curly brace is for render function
export default Item;

score 1 · Answer 2 · answered Jun 08 '20 at 13:16

In this particular instance, conversion is straight forward as they are simple 'dumb' components. You just remove the classes, convert them into standard functions with their props passed as a parameter, remove the render() and replace with a return.

APP.JS

import React from 'react'
import List from './components/List'

function DataArr() {
    const fruits = ["banana", "apple", "pear", "melon", "lemon"];

    return (
        <div className="DataArr">
          <List fruits={fruits}/>
        </div>
    );
}

export default DataArr;

LIST.JS

import React from "react";

import Item from "./Item"; 

function List({ fruits }) {
    return (
      <div>
        {fruits.map((fruit, index) => {
          return <Item key={index} fruit={fruit} />;
        })}
      </div>
    );
}

export default List;

ITEM.JS

import React from 'react';

function Item({ fruit }) {
    return (
        <div>
            {fruit}
        </div>
    );
}

export default Item;

score 0 · Answer 3 · answered Jun 08 '20 at 13:38

APP.JS

    import React from 'react';
    import List from './components/List';

    const DataArr = () => {
        const fruits = ["banana", "apple", "pear", "melon", "lemon"];
        return (
            <div className="DataArr">
                <List fruits={fruits} />
            </div>
        )
    }
    export default DataArr;

LIST.JS

import React from 'react';
import Item from './Item';

const List = (props) =>
        {props.fruits.map(fruit, index) => 
              <Item key={index} fruit={fruit} />};
export default List;

ITEM.JS

import React from 'react';

const Item = (props) => {props.fruit};

export default Item;

React: change from class based components to functional based components

3 Answers3