Filter and data have missing dependency-CodePudding

I have one issue with my code where I need to filter though "id" and this is the error that I get " React Hook useEffect has missing dependencies: 'data' and 'filterData'. Either include them or remove the dependency array. Data is a json file which is inside the project folder.

and this is the code. When i try to console log data is says that data is undefined.

import { Container, Table, Form } from "react-bootstrap";
import { Diff } from "./components/utils";

const MovieCard = ({ title, data, val }) => {
 const [computed, setComputed] = useState(data);
 const [content,setContent] = useState ("");
 const [filterData, setFilterData] = useState("");

 //filter 

 useEffect(() => {
   if (content === "") {
     setFilterData(data); 
     return;
   }

   const filteredData = filterData.filter((item) => item.Id === content);
   setFilterData(filteredData);
 }, [content]);

 const handleSubmit = (e) => {
   e.preventDefault();
 };

 const handleChange = (e) => {
   setContent(e.target.value);
 };
console.log (data);

 return (
   <Container className="text-center">
     <h3 className="my-3">
       Reciever Card for ➡️ <span>{title}</span>
     </h3>
     <Form onSubmit={handleSubmit} className="mt-3">
       <Form.Group className="d-inline-flex p-2" controlId="search">
         <Form.Control
           style={{ width: "80%" }}
           value={content}
           className="m-1"
           type="text"
           placeholder="Search"
           onChange={(e) => handleChange(e)}
         />
       </Form.Group>
     </Form>
     {filterData &&
       filterData.map((item, i) => {
        return (
     <Table striped bordered hover size="sm">
       <thead>
         <tr>
           <th>#</th>
           <th> Id</th>
           <th> Time</th>
           <th>Diff</th>
         </tr>
       </thead>
       <tbody>
         {computed.map((item, i) => {
           const enq_time = new Date(item.Time).toLocaleTimeString();
           const diffString = Diff(
             item.Time
           );
         
           return (
             <tr key={i}>
               <td>{i   1}</td>
               <td>{item.Id}</td>
               <td>{enq_time}</td>
               <td>
                {diffString}
               </td>
             </tr>
           );
         })}

       </tbody>
     </Table>
        )})}
     </Container>
       
    
   

);
};
   
export default MovieCard;

CodePudding user response：

You need to add the dependency for data and filterData

  useEffect(() => {
   if (content === "") {
     setFilterData(data); 
     return;
   }

   const filteredData = filterData.filter((item) => item.Id === content);
   setFilterData(filteredData);
 }, [content, filterData, data]);

CodePudding user response：

You only declared content as dependency in your useEffect block, but you're actually using data (which is a prop) and filterData (which is coming from useState()) as well.

These are dependencies and the error message is saying you need to declare them too (meaning your useEffect block will be executed every time one of its dependencies changes) or to remove depencencies at all (meaning your useEffect block will be executed only once):

 useEffect(() => {
       if (content === "") {
         setFilterData(data); 
         return;
       }
    
       const filteredData = filterData.filter((item) => item.Id === content);
       setFilterData(filteredData);
     }, 
     [content, data, filterData] // or [] for no depencencies
 );