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

Question

[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}>

Как то так, надеюсь понятно обьяснил..

Comments

[WbICHA]

Ну так ты onChangeColor в HouseOptions не передаёшь.

[berameba]

WbICHA, так он же изначально в houseOptions лежит вроде?Потом в родитель constructor передаю, и потом в floor.Вроде так...

[WbICHA]

berameba,

так он же изначально в houseOptions лежит вроде?

Мы точно об одном и том же коде говорим?

[berameba]

WbICHA, Ну..Есть компонент houseOptions.Там есть select, где можно выбрать цвета.Это первый кусок кода.Константа colorChange там же лежит.Потом я экспортирую houseOptions вместе с ним.А потом, в 4 отрезке кода, уже в родителе constructor возвращаю houseOptions.Потом делаю состояние в родителе constructor и передаю его во floor.
Вот colorChanage

export const HouseOptions = ({title, onChange, onChangeColor}) => {

    const handleNameChange = (event) => {
        onChange(event.target.value)
    }

    const colorChange = (event) => {
        onChangeColor(event.target.value)
    }

    return (
        <div className={styles.main}>
            <div className={styles.h1}>{title}</div>
            <button className={styles.button}>delete</button>
            {/*суда нужно removeHouse добавить*/}
            <div className={styles.container}>
                <div className={styles.flexContainer}>
                    <div className={styles.text}>Floors:</div>
                    <input className={styles.input} onChange={handleNameChange}/>
                </div>
                <div className={styles.flexContainer}>
                    <div className={styles.text}>Color</div>
                    <select name="choice" onChange={colorChange}>
                        <option value="red">red</option>
                        <option value="yellow">yellow</option>
                        <option value="green">green</option>
                    </select>
                </div>
            </div>
            <input type={"range"} min={1} max={10} className={styles.slider}/>
        </div>
    );
};

export default HouseOptions;

[WbICHA]

berameba, и как это всё противоречит моим словам?

[berameba]

WbICHA, Ошибку понял, теперь все работает.Извините, что у меня iq как у сапожка