questions-75421565.jsx

import React from 'react';
import './App.css';

const InsideSection = (props) => {
  const { recent, setRecent } = props;
  const ulRef = React.createRef<any>();
  React.useEffect(() => {

    console.log("overflow");
    console.log(recent, "before"); // returns [] instead of the list
    console.log([...recent].slice(1));
    // this should return ["Paris", "London", "paris", "new york", "dubai", "New York"] (without the first "Dubai")
    // but when there is a setRecent inside the if statement, it causes an error as recent is []
    setRecent([...recent].slice(1)); // causes the error
    console.log(recent, "after"); // returns []
  }, []);

  return (
      <div className = "search-container" >
        ...
        <ul ref={ulRef} >

        </ul>
      </div >
  );
}

function App() {
  const [recent, setRecent] = React.useState(["Dubai", "Paris", "London", "paris", "new york", "dubai", "New York"]);

  return (
    <InsideSection recent={recent} setRecent={setRecent} />
  );
}

export default App;