Невозможно отфильтровать данные через несколько флажков

Question

У меня есть компонент, который отображает список флажков, используемых для фильтрации данных.В моем компоненте FilterRecipes я создал состояние, называемое флажками, и использовал это состояние для сопоставления с компонентом флажков, где он отображает список различных типов флажков.Прямо сейчас у меня есть список флажков, и я создал функцию handleCheckedBoxes, чтобы указать, какой флажок проверяется.Однако я хочу, чтобы, когда пользователь нажимал на определенный флажок, я хотел, чтобы RecipeCard была отфильтрована.

Есть одна вещь, которая, я думаю, может быть причиной этой проблемы.Мое состояние флажка находится в компоненте FilteredRecipes, а RecipeCard - в компоненте SelectRecipes.Я думаю, что состояние флажка не может быть обновлено до RecipeCard, потому что оно должно быть в компоненте SelectRecipes.Я думал, что создание состояния для флажков сделает код проще.Пожалуйста, дайте мне знать, если есть лучший подход, который я могу использовать.

class SelectRecipes extends Component {
    state = {
        recipes: 
           [ {
                name: 'dessert',
                description:""
            }

        ],
        filteredRecipes: []   

    }

    handleFilterName = (e) => {

        const recipes = this.state.recipes
        const filteredRecipeName = recipes.filter( recipe => {
            return (
                recipes.name.toLowerCase().search(e.target.value.toLowerCase()) == -1
            );

        })
        this.setState({filteredRecipes: filteredRecipeName})
    }

    render() {
        return (
            <div>
                 <NavHeader/> 
 <SearchRecipes handleFilterName={this.handleFilterName.bind(this)}/> 
                <FilterRecipes recipes={this.state.recipes}  
 handleFilterType={(e) => this.handleFilterType(e)} ></FilterStrain>

               <RecipeCard  recipes={this.state.filteredRecipes}></StrainCard>
            </div>
        )
    }
}


SelectRecipes.propTypes = {
    recipes: PropTypes.array,
    filteredRecipes: PropTypes.array,

}

export default SelectRecipes


class FilterRecipes extends Component {

    state = {
        checkboxes: [
            {id: 1, value: "dessert", isChecked: false},
            {id: 2, value: "dinner", isChecked: false},
            {id: 3, value: "breakfast", isChecked: false},
          ],

          filterRecipe: []
    }

    handleCheckedBoxes = (event) => {
        let checkboxes = this.state.checkboxes

        checkboxes.forEach(check => {
           if (check.value === event.target.value)
           check.isChecked =  event.target.checked 
        })
        this.setState({checkboxes: checkboxes})
      }

      updateType = (event) => {
        let recipes = this.props.recipes

        const filterRecipe = recipes.filter(recipe => {

            return recipe.name.match(event.target.value)
        })
        this.setState({filterRecipe })
      }

    render() {
        return (
            <div>
              <Card style={{ width: '20rem', height: '100rem'}} >
                 <Card.Body>

                    <Card.Title>Type</Card.Title>
                       <ul>
                         {
                         this.state.checkboxes.map( (check, index) => {
                          return  <Checkbox recipes= {this.props.recipes} updateType={this.updateType} handleCheckedBoxes={this.handleCheckedBoxes} key={index} {...check}/>
                                }) 
                            </ul>

                            <Card.Title>Mood</Card.Title>
                        </Card.Body>
                    </Card>
            </div>
        )
    }
}

FilterRecipes.propTypes = {
    checkboxes: PropTypes.object,
    filterStrainType: PropTypes.array.isRequired
}

export default FilterRecipes


const Checkbox = (props) => {

    return (
        <li>
        <input key={props.id}  recipes={props.recipes} onClick={props.updateType} onChange={props.handleCheckedBoxes} type="checkbox" checked={props.isChecked} value={props.value} /> {props.value}
       </li>
    )

}

export default Checkbox