React Multiple Button Filter

I have been able to map JSON wine data to a table and filter the table of wine data by color. When I click Red, the table filters to red wines, and the same for the White button.

Goal: Filter JSON data with multiple buttons. I would like to add taste buttons (Sweet, Dry, Semi-Sweet) that filter by taste and a body button that will filter wines by body How can I accomplish this?

Here, I created an object that defines wines and their properties:

    var wineData = {
    
      redWines : [
        {name: "Pinot Noir", body: "Light", taste:"Dry"},
        {name: "Cabernet Sauvignon", body: "Full", taste:"Dry"},
        {name: "Malbec", body: "Full", taste:"Dry"},
        {name:"Zinfadel",body:"Medium",taste:""},
        {name: "Montepulciano", body: "Medium", taste:"Dry"},
        {name: "Merlot", body: "Medium", taste:"Dry"},
      ],
    
    whiteWines : [
      {name: "Chardonnay", body: "Full", taste:"Dry"},
      {name: "Pinot Grigio", body: "Light", taste:"Dry"},
      {name: "Moscato", body: "Light", taste:"Semi-Sweet"},
      {name:"Sauvignon Blanc",body:"Light",taste:"Dry"},
      {name: "Riesling", body: "Light", taste:"Semi-Sweet"},
      {name: "White Zinfadel", body: "", taste:"Sweet"},
    ]
    
    }
const wine_names = {
  red: wineData.redWines.map(({ name }) => name.toLowerCase()),
  white: wineData.whiteWines.map(({ name }) => name.toLowerCase()),
  sweet: wineData.redWines.map(({taste})=> taste.toLowerCase()),
  sweet: wineData.whiteWines.map(({taste})=> taste.toLowerCase())

};

filterData algo that filters wines by its color property (matching with wineData data)

const filterData = (wines,color)=>{
  if(!taste) return wines;
  if(!color) return wines;
  return wines.filter(
    (wine) => wine_names[color].some(
      (name) => wine.field2.toLowerCase().includes(name),
      ) ) 
    }

Button and Form components

const Form = ({ handleColorChange,handleTasteChange,color,taste}) => {


  const handleClick = (e) =>{
    const {color}=e.target.dataset
    handleColorChange(color);
    handleTasteChange(taste);
    console.log(color);
   }
  

  return (
<div>
    {/* <input type="text" value={filteredData} onChange={(e)=>setFilteredData(e.target.value)}></input> */}

    <form onSubmit={(e)=> e.preventDefault()}>

            <Button
            buttonText="Red"
            color="red"
            handleClick={handleClick}
           />
              
            <Button
            buttonText="White"
            color="white"
            handleClick={handleClick}

            
           />
           
           


           <Button
           buttonText="reset"
           color=""
           handleClick={handleClick}
          
           />
          

    </form>
   </div>
  )
}

export default Form

const Button = ({buttonText, color, handleClick, taste, handleColorClick,handleTasteClick}) => {
  return (
    <button
        data-color={color}
        data-taste={taste}
        onClick={handleClick}
      

        
        // onClick={handleTasteClick}
        
    >
        {buttonText}
    </button>
    )
}

export default Button

A line from my wine JSON file looks like this:

{"key":"38843316","field2":"Robert Mondavi Winery Napa Merlot","field3":"Robert Mondavi Winery Napa Valley Merlot Red Wine showcases glorious richness and mouthwatering fruit flavors. Deeply intense Bing cherry and blackberry flavors layer with warm oak spices and a fresh, earthy complexity on the palate. Firm, velvety tannins are balanced by refreshing acidity and long finish. The unique geography and climate of Napa Valley produce delicious grapes that give this Robert Mondavi red wine its distinctive character and intense fruit flavor." ,"field4":"Robert Mondavi","field5":"31.99","field6":"Robert Mondavi","field7":"750","field8":"ml","field9":"California"}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/dP1g9bT