onChange prop value undefined

Question

I'm using reactprime TreeSelect. I want to create an array by editing the variable named returnArray and send it to the main component's state via props. But onChange seems undefined. Same process was working in OnValueChanged.

Main Component:

return(
          <SubComponent>
            onChange={(val) => {
              console.log("here")
            if (val)
              setFormDataDetails({
                ...formDataDetails,
                [item.NS_CI_ID]: val,
              });
          }}
          </SubComponent>
);

SubComponent:

  const nodeStateCh = (e) => {
    setSelectedNodeKeys(e.value)
    let rArray= []
    rArray.push("test")
    if (props.onChange) {  //undefined...
      props.onChange(returnArray)
    }
    
  }



  return (
    <div className="card flex justify-content-center">
      <TreeSelect
        value={selectedNodeKeys}
        onChange={nodeStateCh}
        options={nodes}
        metaKeySelection={false}
        filter
        className="md:w-20rem w-full"
        selectionMode="checkbox"
        display="chip"
        placeholder="Select Items"
      >
        {' '}
      </TreeSelect>
    </div>
  )

Answer 1

you passed your onChange as a child, not as a param, this is why porpos are empty.

Instead of this:

 <SubComponent>
     onChange={(val) => {
         console.log("here")
         if (val)
           setFormDataDetails({
                ...formDataDetails,
                [item.NS_CI_ID]: val,
           });
     }}
 </SubComponent>

It should be like this:

 <SubComponent
     onChange={(val) => {
         console.log("here")
         if (val)
           setFormDataDetails({
                ...formDataDetails,
                [item.NS_CI_ID]: val,
           });
     }}
 />

And then, you pass this function as a param called onChange.

In your method, you passed this also as a param, but special param called children, but it is for different purpose.

You can read more about that in docs: https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children