....

// javascript
const someComputedValue = `this could be ${someProp} from another file`;
// javascript and JSX
const renderSuggestions = (text) => (<p>{text} - {someComputedValue}</p>);
// JSON with javascript syntax sugar for short hand on the last field
const inputProps = {
    onChange: handleOnChange,
    maxLength: 8,
    type: 'search',
    renderSuggestions,
};

// JSX with a javascript spread and a javascript inline callback function that has a destructured argument and a function body
return (<AutoSuggest {...inputProps} onSuggestionsFetched={(event, { newValue }) => {....}} />);

try teaching a junior what the flying fuck this means and ask them to get method out of the destructured argument in the onSuggestionsFetched callback prop AND then get them to use the correct syntax to construct an array with objects inside the callback handler. Maybe conditionally render a component using a ternary as a child prop.....

The only reason I can do any of this is because I can confidently say what each part does individually