How to manage checkbox filtering with React?

I am working on my first React app. It is a recipe sort of app. It has an ingredients filter. The main component is the Cookbook component. It has a Filter component and a Recipe component.

The Recipe component displays all recipes on load. The Filter component displays all needed ingredients or staples. This part all works great.

What I want to do now is when a person clicks on a staple, lets say butter, it would then filter the entire recipe list. My assumption is that I need to pass the state of Filter up. How can I do this with these checkboxes?

Here is what I have:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
var data = require('./recipes.json');

function IngredientDetailList(props){
    const ingredientList = props.ingredientList;
    const listItems = ingredientList.map((ingredient, index) => 
        <div key={index}> 
            {ingredient.measurement_amount}&nbsp;
            {ingredient.measurement_unit}&nbsp;
            {ingredient.ingredient}
        </div>

    );
    return (
        <div>{listItems}</div>
    )
}


function Recipe(props){
    const recipeList = props.cookbook.recipes
    const listItems = recipeList.map((recipe) =>
        <div key={recipe.id}>
            <h2>{recipe.name}</h2>
            <IngredientDetailList ingredientList = {recipe.ingredient_list}/>
        </div>

    );
    return(

        <div>{listItems}</div>
    )
}

class Filter extends React.Component {
    constructor(){
        super();
        this.state = {
            checkedStaples: {},
        }
    }

    render(){
        const stapleList = this.props.stapleList;
        const checkboxItems = stapleList.map((staple, index) => 
            <div key = {index}>
            <label>
                <input type="checkbox" value="{staple}"/>
                {staple}
            </label>
            </div>
        );
        return (
            <form>
                {checkboxItems}
            </form>
        );
    }
}


class Cookbook extends React.Component {
    constructor(){
        super(); 
        this.state ={
            cookbook: data
        }   
    }

    getStapleList(recipes){
        let stapleList = [];
        recipes.forEach(function(recipe){
            recipe.ingredient_list.forEach(function(list){
                stapleList.push(list.needed_staple);
            });
        });

        let flattenedStapleList = stapleList.reduce(function(a,b){
            return a.concat(b);
        })

        return flattenedStapleList
    }

    render(){
        const cookbook = this.state.cookbook;
        const stapleList = this.getStapleList(cookbook.recipes);
        return(
            <div className="cookbook">
                <div className="filter-section">
                    <h1>This is the filter section</h1>
                    <Filter stapleList = {stapleList}/>
                </div>
                <div className="recipes">
                    <h1>This is where the recipes go</h1>
                    <div className="recipe">    
                        <Recipe cookbook = {cookbook}/>
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
  <Cookbook />,
  document.getElementById('root')
);