CODEWITHSUNDEEP
javascriptreactjsjsx
Muhammad Ali
Muhammad Ali

Reputation: 11

Can I write if /else conditions in onClick element is JSX/ ReactJS?

hope you all are doing well, I am new to ReactJS and JSX syntax below in the problem I am rendering a table element based on different roles from the same Generic Table component now I have to set onClick attribute's navigation on basis of role and I cannot make a function outside of the scope because I am using the rowIndex to fetch the resignation_Id so can anybody please explain me how to resolve this problem?

    <TableCell>
                                                    <Button
                                                        onClick={
                                                            //      if(`${props.heading}` == "CLEARANCES"){
                                                            //  markCleared(`${row.resignationId}`)
                                                            // } else if{
    
                                                            // }
                                                            `${props.heading}` == "CLEARANCES"
                                                                ? () => markCleared(`${row.resignationId}`)
                                                                : () =>
                                                                    navigate(`/resignations/${props.role}/action/${row.resignationId}`)
                                                        }
                                                        variant="outlined"
                                                        size="small"
                                                        color="success"
                                                    >
                                                        {props.buttonTitle}
                                                    </Button>
                                                </TableCell>
                                            </TableRow>
                                        ))}
                                </TableBody>

Upvotes: 1

Views: 64

Answers (3)

Ashish radadiya
Ashish radadiya

Reputation: 192

You can't just insert statements as your onClick prop, you need to pass a function. You can write the entire function into the JSX but that's not recommended and not necessary. You can simply pass any data you need along, like onClick={() => onClick(row)}

const onClick = (row) =>{
        if (props.heading === "CLEARANCES") {
            markCleared(row.resignationId)
        } else if {
            navigate(`/resignations/${props.role}/action/${row.resignationId}`)
        }
    }

<Button
  onClick={()=>onClick(row)}
  variant="outlined"
  size="small"
  color="success"
>
  {props.buttonTitle}
</Button>

Upvotes: 1

Usama Bhatti
Usama Bhatti

Reputation: 1

Yes you can. OnClick gives you an event that you can catch in following way:

onclick((e) => {
  //your code goes here
}

Upvotes: 0

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20934

Pass a function directly to the onClick prop and handle your if statement in there.

<Button
  onClick={() => {
    if (props.heading === "CLEARANCES") {
      markCleared(row.resignationId)
    } else if {
      navigate(`/resignations/${props.role}/action/${row.resignationId}`)
    }
  }}
  variant="outlined"
  size="small"
  color="success"
>
  {props.buttonTitle}
</Button>

Upvotes: 3

Related Questions