Set onClick if onClick prop given

Question

I have a component that might or might not recieve an onClick prop. I want to attatch this non-required prop as a click handler.

const MyComponent = (props) => {
    let {onClick} = props;

    return (
        <div onClick={onClick}></div>
    );
}

Whats the safest way to do this sort of thing if I don't know if the handler will be given?

Jordan Enev · Answer 1 · 2018-06-12T00:21:02.720

4

Using spread and ternary operator:

const MyComponent = ({ onClick, ...rest }) => {
  const props = onClick ? { onClick } : {}

  return <div { ...props } />
}

edited Jun 12 '18 at 00:21

answered Jun 12 '18 at 00:01

Jordan Enev

Sorry, I actually have other props in this component. I just took them out to simplify the question. How would I do this when theres other props involved? – MarksCode Jun 12 '18 at 00:11
In `rest` variable, you have all others props. – Jordan Enev Jun 12 '18 at 00:14
Also if you want explicitly describe the props as we did it for onClick, you can define them conditionally as here: https://stackoverflow.com/a/50367186/4312466 – Jordan Enev Jun 12 '18 at 00:18
Can I just do this instead? `onClick = onClick || null` then set the `onClick={onClick}`? – MarksCode Jun 12 '18 at 00:18
I'm not sure whether setting a `null` handler will cause an error. If so, you can pass an empty function, but in both cases you're setting a value to `onClick`. So I prefer the way I answered you. – Jordan Enev Jun 12 '18 at 00:30

1 Answers1