Convert class component function to a functional component function

Question

I have class component functions that handle a search function.

filterData(offers,searchKey){
const result = offers.filter((offer) =>
        offer.value.toLowerCase().includes(searchKey)||
        offer.expiryDate.toLowerCase().includes(searchKey)||
        offer.quantity.toLowerCase().includes(searchKey)
    )
    this.setState({offers:result})
}

const handleSearchArea = (e) =>{
    const searchKey=e.currentTarget.value;

    axios.get(`/viewPendingSellerOffers`).then(res=>{
        if(res.data.success){
            this.filterData(res.data.existingOffers,searchKey)
        }
    });
}

Now I try to convert these class component functions to functional component functions. To do this I tried this way.

const filterData = (offers,searchKey) => {
const result = offers.filter((offer) =>
        offer.value.toLowerCase().includes(searchKey)||
        offer.expiryDate.toLowerCase().includes(searchKey)||
        offer.quantity.toLowerCase().includes(searchKey)
    )
    setState({offers:result})
}

const handleSearchArea = (e) =>{
    const searchKey=e.currentTarget.value;

    axios.get(`/viewPendingSellerOffers`).then(res=>{
        if(res.data.success){
            filterData(res.data.existingOffers,searchKey)
        }
    });
}

But I get an error that says "'setState' is not defined". How do I solve this issue?

you can't use setState with functional components, you have to upgrade to hooks learn more about hooks here -> reactjs.org/docs/hooks-intro.html — Amruth
– Amruth, Commented Aug 7, 2021 at 11:54
You need to do something like const [offers, setOffers] = useState([]) and then setOffers(result). — TechySharnav
– TechySharnav, Commented Aug 7, 2021 at 12:00

Ala Hamadi · Accepted Answer · 2021-08-07 12:22:06Z

Solution:

import React, {useState} from "react";
import axios from "axios";

const YourFunctionalComponent = (props) => {
  const [offers, setOffers] = useState()

  const filterData = (offersPara, searchKey) => {// I changed the params from offers to offersPara because our state called offers
    const result = offersPara.filter(
      (offer) =>
        offer?.value.toLowerCase().includes(searchKey) ||
        offer?.expiryDate.toLowerCase().includes(searchKey) ||
        offer?.quantity.toLowerCase().includes(searchKey)
    );
    setOffers(result);
  };

  const handleSearchArea = (e) => {
    const searchKey = e.currentTarget.value;

    axios.get(`/viewPendingSellerOffers`).then((res) => {
      if (res?.data?.success) {
        filterData(res?.data?.existingOffers, searchKey);
      }
    });
  };
  return (
    //To use your *offers* state object just call it like this {offers?.El1?.El2}
  );
};
export default YourFunctionalComponent;

Note: It is recommended to do null check before accessing nested objects like this res?.data?.existingOffers, Optional chaining will help us in this regard.

Collectives™ on Stack Overflow

Convert class component function to a functional component function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related