Задать вопрос
@berameba

Почему не передается цвет через компоненты?

По задумке - пользователь выбирает цвет в select.Этот цвет должен в конце концов попасть в компонент floor и с помощью styled components изменить цвет.Но почему то, при выборе цвет выпадает ошибка onChangeColor is not a function.Если смотреть через console log, то вообще undefined..

Тут выбирается цвет:
<select name="choice" onChange={colorChange}>
                        <option value="red">red</option>
                        <option value="yellow">yellow</option>
                        <option value="green">green</option>
                    </select>

Вот сам colorChange:
const colorChange = (event) => {
        onChangeColor(event.target.value)
    }

Потом экспорт функции:
export const HouseOptions = ({title, onChange, onChangeColor}) => {

Потом вывожу onChangeColor через child (handleNameChange это еще одна функция)
return <HouseOptions title={house.title}  onChange={e => { handleNameChange(e); onChangeColor(e) }}/>

Потом в компоненте родителе делаю состояние:
const [color, setColor] = useState()
    const onChangeColor = (color) => {
        setColor(color)
    }

Потом добавляю во floor цвет:
for (let i = 1; i < numOfFloors; i++) {
                            floors.push(<Floor key={house.id} color={color}/>);
                        }
                        return (
                            <House key={house.id}>
                                {floors}
                            </House>
                        );

Во floor вывожу цвет в styled components:
const FloorColor = styled.div`
      background-color: ${(color) => color === 'red' ? 'red' : color === 'yellow' ? 'yellow' : 'purple'};
    `

    return (
        <FloorColor className={styles.main} color={color}>

Как то так, надеюсь понятно обьяснил..
  • Вопрос задан
  • 83 просмотра
Подписаться 1 Простой 6 комментариев
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
  • Яндекс Практикум
    Фулстек-разработчик
    16 месяцев
    Далее
  • Javascript.ru
    Курс по React
    5 недель
    Далее
  • Нетология
    Fullstack-разработчик на Python + нейросети
    20 месяцев
    Далее
  • Нетология
    Фронтенд-разработчик
    11 месяцев
    Далее
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽