React FunctionComponent callback on change

Question

I'm trying to use the Fluent UI PeoplePicker based on this example, for office outlook Add-In: FLUENT UI PeoplePicker which uses FunctionComponent in React. I'm not fluent in React but still, I know how callbacks work in classes, but I'm not sure if it is possible to achieve callbacks in Function Components ?

I have this example of PeoplePicker FunctionComponent used in main App class. I would need to pass data back to parent on change of this PeoplePicker value, but I don't quite know how to do it.

Main question is, how to pass values back from FunctionComponent if it is possible ?

Answer 1

This is a regular structure of a Child -> Parent callback structure with functional components.

const Parent = () => {
  const handleOnChange = () => {
    console.log('This was called');
  };

  return(<Child onChange={handleOnChange} />);
};

const Child = (props) => {
  return(<button onClick={props.onChange}>Click here</button>);
};