from react class to hooks change

Question

I'm new react developer, since everybody says that react hooks is better to start with rather than classes, i started with hooks, here i'm trying to change classes into hooks, class version is fully working, i just want to change it into hooks and learn from it, so here i have changed took class away and its state and setState and put useState but still getting error : 'TypeError: Object(...) is not a function''> 6 | function EventsSection() {'

class version:

import React, { Component } from "react";

import { EventsTable } from "../EventsTable";
import { TitleSearch } from "../TitleSearch";

const eventsData = [
  {
    key: 1,
    title: "Bulletproof EP1",
    fileType: "Atmos",
    process: "match media",
    performedBy: "Denise Etridge",
    operationNote: "-",
    updatedAt: "26/09/2018 17:21",
    status: "complete",
  },
  {
    key: 2,
    title: "Dexter EP2",
    fileType: "Video",
    process: "Compliance",
    performedBy: "Dane Gill",
    operationNote: "passed",
    updatedAt: "21/09/2018 12:21",
    status: "inProgress",
  },
];

class EventsSection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      eventsData,
    };
  }

  handleFilter = (key) => {
    const selected = parseInt(key);
    if (selected === 3) {
      return this.setState({
        eventsData,
      });
    }

    this.setState({});
  };

  handleSearch = (searchText) => {
    const filteredEvents = eventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    this.setState({
      eventsData: filteredEvents,
    });
  };

  render() {
    return (
      <section>
        <header>
          <TitleSearch onSearch={this.handleSearch} />
        </header>
        <EventsTable eventsData={this.state.eventsData} />
      </section>
    );
  }
}

export { EventsSection };

hooks:

import React, { useState } from "react";

import styles from "./style.module.css";
import { EventsTable } from "../EventsTable";
import { TitleSearch } from "../TitleSearch";

function EventsSection() {
  const [eventsData, setEventsData] = useState([
    {
      key: 1,
      title: "Bulletproof EP1",
      fileType: "Atmos",
      process: "match media",
      performedBy: "Denise Etridge",
      operationNote: "-",
      updatedAt: "26/09/2018 17:21",
      status: "complete",
    },
    {
      key: 2,
      title: "Dexter EP2",
      fileType: "Video",
      process: "Compliance",
      performedBy: "Dane Gill",
      operationNote: "passed",
      updatedAt: "21/09/2018 12:21",
      status: "inProgress",
    },
  ]);

  const handleFilter = (key) => {
    const selected = parseInt(key);
    if (selected === 3) {
      return setEventsData();
    }

    setEventsData({});
  };

  const handleSearch = (searchText) => {
    const filteredEvents = eventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    setEventsData(filteredEvents);
  };

  return (
    <section>
      <header>
        <h1>Events</h1>

        <TitleSearch onSearch={handleSearch} className={styles.action} />
      </header>
      <EventsTable eventsData={eventsData} />
    </section>
  );
}

export { EventsSection };

kmhigashioka kmhigashioka · Accepted Answer · 2021-03-04T08:59:55

import React from "react";

import { EventsTable } from "../EventsTable";
import { TitleSearch } from "../TitleSearch";

const defaultEventsData = [
  {
    key: 1,
    title: "Bulletproof EP1",
    fileType: "Atmos",
    process: "match media",
    performedBy: "Denise Etridge",
    operationNote: "-",
    updatedAt: "26/09/2018 17:21",
    status: "complete",
  },
  {
    key: 2,
    title: "Dexter EP2",
    fileType: "Video",
    process: "Compliance",
    performedBy: "Dane Gill",
    operationNote: "passed",
    updatedAt: "21/09/2018 12:21",
    status: "inProgress",
  },
]

function EventsSection () {
  const [eventsData, setEventsData] = React.useState(defaultEventsData)

  const handleFilter = (key) => {
    const selected = parseInt(key);
    if (selected === 3) {
      setEventsData(defaultEventsData)
    }
  }

  const handleSearch = (searchText) => {
    const filteredEvents = defaultEventsData.filter(({ title }) => {
      title = title.toLowerCase();
      return title.includes(searchText);
    });

    setEventsData(filteredEvents)
  }

  return (
    <section>
      <header>
        <TitleSearch onSearch={handleSearch} />
      </header>
      <EventsTable eventsData={eventsData} />
    </section>
  )
}

export { EventsSection };

It must be on how you import your component. On your class component, you are exporting as export { EventsSection };. However, in your functional component, you are exporting as export default EventsSection;.

So it's either you change how you import the component or change how you export your functional component.

from react class to hooks change

1 Answers