How do I access props from child ccomponent?-CodePudding

how do i get access to the props ? handleCall funtion is in the Dialer component

   const SipPhone = () => {
     return (
        <SipProvider
        host="197.159.142.228"
        port={5060}
        pathname="/ws" // Path in socket URI (e.g. wss://sip.example.com:7443/ws); "" by default
        user="27329"
        password={'bB3JwU7i'} // usually required (e.g. from ENV or props)
        autoRegister={true} // true by default, see jssip.UA option register
        autoAnswer={false} // automatically answer incoming calls; false by default
        iceRestart={false} // force ICE session to restart on every WebRTC call; false by default
        sessionTimersExpires={120} // value for Session-Expires header; 120 by default
        debug={false} // whether to output events to console; false by default
        inboundAudioDeviceId={"default"} // default, or a deviceId obtained from navigator.mediaDevices.enumerateDevices()
        outboundAudioDeviceId={"default"} // default, or a deviceId obtained from navigator.mediaDevices.enumerateDevices()
        
      >
            <Dialer />
      </SipPhone>
  )
}

the child component(Dialer) should have access to startCall, call, sip but returns undefined.

const handleCall = () => {
    
    const {
      startCall,
      sip: { status: sipStatus },
      call: { status: callStatus }
    } = props;

    if ( sipStatus !== sipType.SIP_STATUS_REGISTERED) {
      return;
    }
    if ( callStatus !== callType.CALL_STATUS_IDLE ) {
      return
    }
    
    startCall(number)
    
  }

CodePudding user response：

the child component(Dialer) should have access to startCall, call, sip

Why do you think so? Unless there is some other relevant code that you have not shown, there is no way for the child component to have access to these props. A component only have access to the props you explicitly pass to them. That means in the Dialer component instantiation you need to pass in the value props like this:

<Dialer startCall={startCall}/>

In order for Dialer component to have access to startCall in its props.

CodePudding user response：

You have to explicitly pass props to child component like this

   const SipPhone = () => {
     return (
        <SipProvider
        host="197.159.142.228"
        port={5060}
        pathname="/ws" // Path in socket URI (e.g. wss://sip.example.com:7443/ws); "" by default
        user="27329"
        password={'bB3JwU7i'} // usually required (e.g. from ENV or props)
        autoRegister={true} // true by default, see jssip.UA option register
        autoAnswer={false} // automatically answer incoming calls; false by default
        iceRestart={false} // force ICE session to restart on every WebRTC call; false by default
        sessionTimersExpires={120} // value for Session-Expires header; 120 by default
        debug={false} // whether to output events to console; false by default
        inboundAudioDeviceId={"default"} // default, or a deviceId obtained from navigator.mediaDevices.enumerateDevices()
        outboundAudioDeviceId={"default"} // default, or a deviceId obtained from navigator.mediaDevices.enumerateDevices()
        
      >
            <Dialer startCall={startCall} sip={sip} call={call}/>
      </SipPhone>
  )
}