Conditional Props in React (ACCEPT only 1 of 2 props) - reactjs

Question

I had a search bar component in react and I wanted to have either an onSubmit prop to it or an onChange prop, but not both of them together. How do I implement it in the best way possible?
I tried using if-else statements but the code doesn't look elegant to me.
class QueryBar extends PureComponent {
render() {
const { placeholder, leftIcon, onSubmit, onChange, width } = this.props;
return (
<form
style={{ width }}
onSubmit={e => {
e.preventDefault();
onSubmit(e.target[0].value);
}}
>
<InputGroup
placeholder={placeholder}
width={width}
leftIcon="search"
rightElement={
<Button
type="submit"
icon={leftIcon}
minimal={true}
intent={Intent.PRIMARY}
/>
}
/>
</form>
);
}
}
QueryBar.propTypes = {
width: PropTypes.number,
placeholder: PropTypes.string,
leftIcon: PropTypes.oneOfType(['string', 'element']),
onSubmit: PropTypes.func
};
QueryBar.defaultProps = {
placeholder: 'Search...',
leftIcon: 'arrow-right',
width: 360
};
export default QueryBar;

Answer 1

You can use the ternary operator (?) instead of if-else.
const { placeholder, leftIcon, onSubmit, onChange, width } = this.props;
const handleSubmit = onSubmit ? onSubmit : onChange;
And use the same function later
<form
style={{ width }}
onSubmit={e => {
e.preventDefault();
handleSubmit(e.target[0].value);
}}
>