React passed data from child to parent not logging in parent

Question

I tried to pass data from a child component to it's parent but it isn't showing in the parent component. In parent component I want to display the duration of a service that is selected in the child component. In the child component I can log the selected service but it isn't passing to its parent:

Parent component:

class CalenderModal extends React.Component {
  state={selectedService:[]}

// handover of child data to parent
  handleServiceSelect = (selectedServiceObj) => {
    this.setState({selectedService: selectedServiceObj});
    console.log('inside CalendarModal:', this.state.selectedService)
}


  handleRemove = () => {
    this.props.onRemove();
  }

  handleSave = () => {
    const fullname = this.fullname.value;
    const phone = this.phone.value;
    this.props.onSave({
      fullname,
      phone,
    });
  }


  render() {

    return (
      <div className="customModal">
        <div>Choose service you want to schedule:</div>
        /// child component
        <ServiceSearch onServiceSelect={()=> this.handleServiceSelect}/>
        <div>{this.state.selectedService.duration} hours</div>


        <button className="customModal__button customModal__button_example" onClick={this.handleSave}>{action}</button>
      </div>
    );
  }
}

export default CalenderModal;

Child component:

class ServiceList extends Component {
    constructor(props) {
        super(props);
      }
    servicesToRender=[]

    handleServiceSelect = (event) => {
        var selectedServiceId =  event.target.value;
        var selectedService = this.servicesToRender.find(({id})=> id === selectedServiceId )
                console.log("inside Service search:",selectedService)
        this.props.onServiceSelect(selectedService);            
    }
    render() {
        const FEED_QUERY = gql`
     {
         servicefeed {
          id
          name
          cost
          duration

     }
    }
   `
        return (
            <Query query={FEED_QUERY} >
                {({ loading, error, data }) => {
                    if (loading) return <div>Fetching</div>
                    if (error) return <div>Error</div>
                     this.servicesToRender= data.servicefeed
                    //  const servicesToRender = data.servicefeed
                    return (
                        <React.Fragment>
                            <label class="my-1 mr-2" for="inlineFormCustomSelectPref">choose service:</label>
                            <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref"  onChange={this.handleServiceSelect}>
                                {this.servicesToRender.map(service => <ServiceSearchOption key={service.id} service={service}  />)}
                            </select>
                        </React.Fragment>
                    )
                }}
            </Query>
        )
    }
}

export default ServiceList

I'm not sure what I'm missing here.

Answer 1

You haven't called the function in parent when passing it as props and using arrow function inline. The correct ways is below

<ServiceSearch onServiceSelect={()=> this.handleServiceSelect()}/>

However, you could have simply passed the function reference without an arrow function since the handleServiceSelect is already and arrow function and will have function binding

<ServiceSearch onServiceSelect={this.handleServiceSelect}/>