Pass a parameter through onclick in react with condition

Question

I am trying to make an onClick with a condition but have an issue when trying to pass with a parameter.

The reason I want to do this is because inside the TableRow I have button that is only visible on desktop. But when people are on 900px and below I want to make it possible to click the entire row. The IsDesktop returns true or false depending on wether the user is over or under 900px

<TableRow hover key={site.id} onClick={isDesktop&&(e)=>handleSubmit(e,site.url)}>
  <TableRowSite site={site} index={index} />
</TableRow>

This is what I have tried so far. But it keeps giving me an error.

Parsing error: Unexpected token, expected "}" (31:67)

I have seen several tutorials using a condition in the onClick but never with a parameter but I believe it is possible as it makes sense.

Use conditional rendering if its desktop render desktop version otherwise render mobile version. — Robert
– Robert, Commented Jul 24, 2022 at 23:47

Vlad Mihet · Accepted Answer · 2022-07-24 23:43:03Z

3

I would try to do something like this:

<TableRow hover key={site.id} onClick={isDesktop ? (e) => handleSubmit(e, site.url) : undefined}>

Otherwise, you're simply trying to pass a Boolean value to an event handling prop that's expecting a callback which is seemingly what the issue at hand is caused by.

edited Jul 24, 2022 at 23:43

answered Jul 24, 2022 at 23:41

Vlad Mihet

565 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drew Reese · Accepted Answer · 2022-07-25 00:50:06Z

1

Conditionally return an undefined handler

<TableRow
  hover
  key={site.id}
  onClick={isDesktop ? (e) => handleSubmit(e, site.url) : undefined}
>
  <TableRowSite {...{site, index }} />
</TableRow>

Or conditionally invoke the handleSubmit callback

<TableRow
  hover
  key={site.id}
  onClick={(e) => isDesktop && handleSubmit(e, site.url)}
>
  <TableRowSite {...{site, index }} />
</TableRow>

answered Jul 25, 2022 at 0:50

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Comments

Eric Webb · Accepted Answer · 2022-07-25 00:27:23Z

0

A quick fix you your component looks like

<TableRow hover key={site.id} onClick={isDesktop&&((e)=>handleSubmit(e,site.url))}>
    <TableRowSite site={site} index={index} />
</TableRow>

Simply wrap everything after the && in parentheses. That said, there's probably a better way to tackle this by rendering a desktop version or mobile version depending on the screen size of the user

answered Jul 25, 2022 at 0:27

Eric Webb

5824 silver badges19 bronze badges

Collectives™ on Stack Overflow

Pass a parameter through onclick in react with condition

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related