Turning a class component to functional component

ItemsList.js

import React from "react"
import { connect } from "react-redux"
import { addItems } from "../../redux/actions/items"

const enhance = connect(
  ({ items }) => ({ items }),
  { addItems }
)

class ItemsList extends React.Component {
  render() {
    return (
      <div>
        <ul>
          {this.props.items.map((item, index) => {
            return (
              <li key={index}>
                {this.renderItem(item)}
              </li>
            )
          })}
          
        </ul>
        <button onClick={this.onAddButtonClick}>Add Item</button>
      </div>
    )
  }
  renderItem = item => <div>{item}</div>

  onAddButtonClick = e => {
    const text = window.prompt("Enter item text:")
    this.props.addItems(text)
  }
}

export default enhance(ItemsList)

import React from "react";
import { connect } from "react-redux";
 import { addItems } from "../../redux/actions/items"

const enhance = connect(({ items }) => ({ items }), { addItems });

const ItemsList = (props) => {
  renderItem = (item) => <div>{item}</div>;
  onAddButtonClick = (e) => {
    const text = window.prompt("Enter item text:");
    props.addItems(text);
  };
  return (
    <div>
      <ul>
        {props.items.map((item, index) => {
          return <li key={index}>{renderItem(item)}</li>;
        })}
      </ul>
      <button onClick={onAddButtonClick}>Add Item</button>
    </div>
  );
};
export default enhance(ItemsList)```