React Js data Mapping

Question

Hello i've been trying to map this however i keep getting the error : Cannot read properties of undefined (reading 'filter')

this is the code i'm using to fetch the data

const [data, setData] = useState([]);
const [filters, setFilters] = useState(data);

  const getProduct = async () => {
const response = await fetch(Data source (cant share it));
if(componentMounted){
  setData(await response.clone().json());
  setFilters(await response.json());
}

return () => {
  componentMounted = false;
}
}

useEffect(() => {
  getProduct()
   // eslint-disable-next-line
}, [])

and this is how i'm mapping the data:

     {filters?.list.filter((product) => product.id === id).map((product) => (
          <div className='product-bigger-wrapper'>
          
            <div class="product-list-wrapper"> 
              <div className="product-detail-container">              
                <div>                    
                  <div className="image-container">
                    <img src={product.image} className="product-detail-image" alt=""/>
                  </div>            
                </div> .... }

Please Note that everything worked fine before adding the count and the list to the api

On initial load, filters is set to data, and data is []. At which point filters?.list is undefined, because the ?. only checks filters is defined (which it is, as an empty array that doesn't have a .list property) You might want to check that .list is defined as well (filters?.list?.filter()) — DBS
– DBS, Commented Aug 31, 2022 at 15:08

Chris Hamilton · Accepted Answer · 2022-08-31 15:36:39Z

1

You've initialized data as an array, but you're expecting an object.

It's probably best to set the default value to undefined, null, or a default object.

const [data, setData] = useState();

or

const [data, setData] = useState(null);

or

const [data, setData] = useState({count: 0, list: []});

answered Aug 31, 2022 at 15:36

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Js data Mapping

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