How to fetch data with useEffect and then render based on selected filter option in React Js

Question

I am fetching the data using useEffect then want to later change or update table based on filter selection but the problem is it's exactly rendering what I am selecting from filter instead it's rendering previous selected option data. for example if I select pending from filter first then resolved it will render pending on selection on resolved.

I don't know where I am making mistakes.

QueryView.js

import { useEffect, useState } from 'react';

const QueriesView = () => {
    const [queryData, setqueryData] = useState([])
    const [status, setStatus] = useState("Pending")
    const [data,setdata] = useState([])

    const getStatus = (e) => {
        setStatus(e.target.value)

        setdata( queryData.filter(ele=> ele.querystatus === status))
    }

    useEffect(() => {
        let url = "https://script.google.com/macros/s/AKfycbykZx2qtz39U5j8TwDRVuziKfoLzF6YkYvDL6Ejoj822Vg9MPe1pDS9PX86IeP1Kzw82Q/exec?request=getQueriesData";
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                const json = await response.json();
                setqueryData(json)
            }
            catch (err) {
                console.log("catching error")
            }
        }
        fetchData();
    }, [])


    return (
        <>       
            
            
                
                
                
                        {data.map(ele => (
                            
                        ))}
                    
                    
                        
                            Date
                            Query Number
                            Email
                            Full Name
                            Phone No.
                            Status
                            Details
                        
                    
                    
                                {ele.querydate}
                                {ele.querynumber}
                                {ele.email}
                                {ele.firstname} {ele.lastname}
                                {ele.contact}
                                {ele.querystatus}
                                
                            
                
            
        
    )
}

export default QueriesView;

zirkelc · Answer

UPDATE: When the data is fetched in the useEffect, it must be filtered again according to the currently selected status:


  useEffect(() => {
    let url =
      "https://script.google.com/macros/s/AKfycbykZx2qtz39U5j8TwDRVuziKfoLzF6YkYvDL6Ejoj822Vg9MPe1pDS9PX86IeP1Kzw82Q/exec?request=getQueriesData";
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setqueryData(json);
        // set filtered again
        setdata(json.filter((ele) => ele.querystatus === status));
      } catch (err) {
        console.log("catching error");
      }
    };
    fetchData();
  }, []);

Here is a working example: https://codesandbox.io/s/exciting-stitch-k11sdd?file=/src/QueriesView.js

When using .map() to render a list of items, you always must provide a key so React can identify the corresponding entries: https://reactjs.org/docs/lists-and-keys.html#keys

For example using the array index (another field than index would better):

{data.map((ele, index) => (
    
            {ele.querydate}
            {ele.querynumber}
            {ele.email}
            {ele.firstname} {ele.lastname}
            {ele.contact}
            {ele.querystatus}
            
    
))}

How to fetch data with useEffect and then render based on selected filter option in React Js

1 Answers