React - передача реквизита родителю

Кажется, я не могу заставить его работать. все, что мне нужно, это передать одно значение, selectedCategory. ошибка, которую я получаю:

Не удается прочитать свойства undefined (чтение «passSelectedCategory») (в дочернем компоненте)

Ребенок:

const CategoryWindow =(props)=> {
    const categories = ["h", "a", "s", "o"]

    return (
        <div className="categories-div">
                {categories.map(category => 
                    <button className={"category-btn " + `${category}`}
                        key={category}
                        value={category}
                        onClick={props.passSelectedCategory(selectedCategory)}       <----
                    >
                            <h2>{category}</h2>
                    </button>
                    )}
                
        </div>
    )
}

родитель:


const Main =()=> {
    const [showElement, setShowElement] = useState([1][0][0]);
    const [selectedCategory, setSelectedCategory] = useState();

    return (
    <>
        <main className="main">
            <div>
                <div>
                     <CategoryWindow
                         passSelectedCategory={setSelectedCategory}   <---
                     />
                </div>
                .....  

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
28
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

 <button className={"category-btn " + `${category}`}
                        key={category}
                        value={category}
                        onClick={() => props.passSelectedCategory(category)}
                    >
                            <h2>{category}</h2>
                    </button>

Все в вашем коде идеально, вам просто нужно изменить функцию onClick, как я упоминал выше.

Ответ принят как подходящий

Попробуйте передать category в качестве параметра в props.passSelectedCategory (дочерний компонент, CategoryWindow не имеет видимости переменной selectedCategory)

Другие вопросы по теме