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;

Answer 1

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:

1. You need to change the class to a function
2. Remove render function
3. Remove this keyword
4. If you have state in your Class Component use hooks and in particular useState or useReducer hook
5. 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;