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>
  )

Where is `nodeStateCh` getting called? At the moment, your code doesn't seem to use it. Unless `onChange={nodeState}` is a typo in the question and is supposed to be `onChange={nodeStateCh}`, in which case, please fix the typo. — Dennis Kats, Mar 29 '23 at 08:13

score 6 · Accepted Answer · answered Mar 29 '23 at 08:19

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

onChange prop value undefined

1 Answers1