reactjs - Περνάμε μια συνάρτηση ως prop σε ένα παιδικό λειτουργικό component

Προσπαθώ να περάσω μια συνάρτηση κλήσης πίσω (callback) σε ένα παιδί που είναι μια λειτουργική συνιστώσα (functional component) ώστε να μπορεί να ενημερώνει τον γονέα. Παίρνω ένα σφάλμα Uncaught TypeError: updateVal is not a function μέσα στο παιδί (θα προσθέσω ένα σχόλιο στη γραμμή όπου συμβαίνει). Κάποιες ιδέες για το τι κάνω λάθος;

export default class Parent extends React.Component {
  constructor(props: any) {
    super(props);

    this.updateVal = this.updateVal.bind(this);

    this.state = {
      val: 'A',
    };
  }
  
  updateVal(newVal: string) {
    this.setState({ val: newVal });
  }

  render() {
    return (
      <Child 
        updateVal={this.updateVal}
      />
    );
  };
}

export function Child(updateVal: any) {
  
  const handleSelectorChange = (event: any) => {
    updateVal(event.target.value); // error here: updateVal is not a function
  };

  return (
      <Select onChange={handleSelectorChange} >
        <option value="A">A</option>
        <option value="B">B</option>
      </Select>
  );
};

Απάντηση #1

Οι ιδιότητες (props) περνιούνται σε λειτουργικά συστατικά ως αντικείμενο, όχι ως ξεχωριστά επιχειρήματα. Εν συντομία, δεδομένου του JSX:

<Child
  foo={fooValue}
  bar={barValue}
/>

μπορείτε να περιμένετε ότι το παιδί θα λάβει ένα αντικείμενο που περιέχει { foo: fooValue, bar: barValue } στα props του.

Το πρώτο όρισμα του λειτουργικού σας στοιχείου είναι εκείνο το αντικείμενο. Μπορείτε να ανακτήσετε την επιθυμητή τιμή απευθείας από αυτό:

export function Child(props) {
  const updateVal = props.updateVal;
  // ...
}

ή καταστρέφοντάς το:

export function Child({ updateVal }) {
  // ...
}

Απάντηση #2

Το πρόβλημα στο Child(updateVal: any). Χρειάζεται να το ενημερώσετε: Child({updateVal}: any)