The problem with passing callback functions, writes an error props.me is not a function, I can only-CodePudding

There is a parent and a child (component) I want to get the values from the child to the parent, I throw the functions themselves into the component, in the child I wrote the return target of the value from the input

parent

const [m, setM] = useState("")
    const me = (m) => {
        setM(m)
        console.log(m)
    }

    const [dey, setD] = useState("")
    const de = (dey) => {
        setD(dey)
    }

    const [y, setY] = useState("")
    const ye = (y) => {
        setY(y)
    }

its companent connect in jsx

<CustomSelect
    className="flex-1"
    btnClass="inp"
    checkedOpt={dey}
    options={d}
    de={de}
/>
<CustomSelect
    className="flex-1 ms-2 ms-xxl-4"
    btnClass="inp"
    checkedOpt={m}
    options={month}
    me={me}
/>
<CustomSelect
    className="flex-1 ms-2 ms-xxl-4"
    btnClass="inp"
    checkedOpt={y}
    options={years}
    ye={ye}
/>

child

 const handleChange = (e) => {
        props.de(e.target.value);
        props.me(e.target.value);
        props.ye(e.target.value);
    }

jsx

<input
    type="radio"
    name="type"
    value={item}
    checked={(item === props.checkedOpt)}
    onChange={handleChange}
/>

CodePudding user response：

Since the props.me is not passed to every component, you just have to check if it's passed as function :

 const handleChange = (e) => {
        props.de?.(e.target.value);
        props.me?.(e.target.value);
        props.ye?.(e.target.value);
    }