how to class component to functional components in react

Question

I have some state and their setState also. but I wanna convert to the class component to the functional component but I don't understand in setState how to do that

state:

   constructor(posts) {
    super(posts);
    this.state = {
      data: posts,
      searchResultArray: [],
      cursor: {},
      currentResultIndex: 0,
    };
    this.onToggle = this.onToggle.bind(this);
  }

SetState:

plz, look this.setState my point is how to convert functional components in those setState ? i dont understand how to multiple state in this.setState function. can i do this in functional components?

  onTextChange = (e) => {
    const { data } = this.state;
    let term = e.target.value;
    let tempObj = {};
    let results = [];
    let newData = {};
    if (term.length > 0) {
      results = getSearchResult(term, data);
      console.log(results);
    }
    if (results.length > 0) {
      tempObj = setSearchResult(data, results, 0);
      newData = tempObj.data;
    } else {
      newData = data;
    }
    this.setState({
      searchResultArray: results,
      data: newData,
      searchTerm: term,
    });
  };
  onBtnClick = (e) => {
    const { data, searchResultArray, currentResultIndex } = this.state;

    let index = 0;
    let tempObj = {};
    if (e.target.id === "prev") {
      index = currentResultIndex - 1;
      tempObj = setSearchResult(data, searchResultArray, index);
      this.setState({
        data: tempObj.data,
        currentResultIndex: index,
        cursor: tempObj.cursor,
      });
    }
    if (e.target.id === "next") {
      index = currentResultIndex + 1;
      tempObj = setSearchResult(data, searchResultArray, index);


      this.setState({
        data: tempObj.data,
        currentResultIndex: index,
        cursor: tempObj.cursor,
      });
    }
  };

Answer 1

To change this to a functional component, you should make use of the useState hook. Basically, useState hook is used to store a state variable and update it later, you do not need to use the class state anymore. There are 2 ways to turn your state into useState, either by using a big useState, that will store a variable similar to your current state. Or you could cut down your state into small pieces (which is much cleaner and the way you should do it in functional react)

Here's how you would do it:

const [data, setData] = useState(posts);
const [searchResultsArray, setSearchResultsArray] = useState();
const [cursor, setCursor] = useState();
const [currentResultIndex, setCurrentResultIndex] = useState();

Then, in your onClick:

onBtnClick = (e) => {
const { data, searchResultArray, currentResultIndex } = this.state;

let index = 0;
let tempObj = {};
if (e.target.id === "prev") {
  index = currentResultIndex - 1;
  setCurrentResultIndex(index)
  tempObj = setSearchResult(data, searchResultArray, index);
  setData(tempObj.data)
  setCursor(tempObj.cursor)
}
if (e.target.id === "next") {
  index = currentResultIndex + 1;
  setCurrentResultIndex(index)
  tempObj = setSearchResult(data, searchResultArray, index);
  setData(tempObj.data)
  setCursor(tempObj.cursor)
 }
};