Filtering data in Api call

Question

I am having a problem filtering data from an API based on their regularPrice. So the error I am having is kinda stupid. It is 'regular price is not defined no-undef The error is showing on the line where I am passing values to the ContextPrivider. I might be blind. I would really appreciate some help. Thank you very much.

Book Context

import React, {useState, useEffect} from 'react'
import URL from '../utilis/URL';
const BookContext = React.createContext();
export default function BooksProvider({ children }) {
  
  const [data, setData] = useState([])
  const [filters, setFilters]= useState({
    regularPrice:"",
    length:""
   
  })
  
  /*fetching data */ 
  const fetchData = async () => {
    const response = await fetch(URL);
    const result = await response.json();  
    console.log(result)
    setData(result);
  };

  useEffect(()=>{
    fetchData();
  },[])

  const updateFilters = e => {
    const type = e.target.type;
    const filter = e.target.name;
    const value = e.target.value;
    let filterValue;
    if (type === "checkbox") {
      filterValue = e.target.checked;
    } else if (type === "radio") {
      value === "all" ? (filterValue = value) : (filterValue = parseInt(value));
    } else {
      filterValue = value;
    }
    setFilters({ ...filters, [filter]: filterValue });
  };

  /* filtering price books */ 
  React.useLayoutEffect(() => {
    let newBooks = [...data].sort((a, b) => a.regularPrice - b.regularPrice);
    const { regularPrice } = filters;  
    if (regularPrice !== "all") {
      newBooks = newBooks.filter(item => {
        if (regularPrice === 0) {
          return item.regularPrice <10;
        } else if (regularPrice === 10) {
          return item.regularPrice > 10 && item.regularPrice < 20;
        } else {
          return item.regularPrice > 20;
        }
      });
    }
  }, [filters, data]);

return (
    <BookContext.Provider value={{ data, filters, regularPrice, updateFilters, handleSelectCategory, setCurrentSelectedCategory, currentSelectedCategory }}>
      {children}
    </BookContext.Provider>
  );
}
export {BookContext, BooksProvider}

Filters

import React, { useContext } from 'react'
import { BookContext } from '../../context/books'

const Filters = () => {
    const {filters:{regularPrice, updateFilters}}= useContext(BookContext)
    return (
        <div>
              <p>Regular Price</p>
          <label>
            <input
              type="radio"
              name="regularPrice"
              id="all"
              value="all"
              checked={regularPrice === "all"}
              onChange={updateFilters}
            />
            all
          </label>
          <label>
            <input
              type="radio"
              name="regularPrice"
              value="0"
              checked={regularPrice === 0}
              onChange={updateFilters}
            />
            $0 - $10
          </label>
          <label>
            <input
              type="radio"
              name="regularPrice"
              value="10"
              checked={regularPrice === 10}
              onChange={updateFilters}
            />
            $10 - $20
          </label>
          <label>
            <input
              type="radio"
              name="regularPrice"
              value="20"
              checked={regularPrice === 20}
              onChange={updateFilters}
            />
            Over $20
          </label>
       
        </div>
    )
}

export default Filters

Answer 1

As the error says, regularPrice isn't defined in BooksProvider. You don't have to expose regularPrice since you can get it from filters but if you really want to, destructure it from filters.

const { regularPrice } = filters

return (
  <BookContext.Provider
    value={{
      data,
      filters,
      regularPrice,
      updateFilters,
      handleSelectCategory,
      setCurrentSelectedCategory,
      currentSelectedCategory,
    }}
  >
    {children}
  </BookContext.Provider>
)