CODEWITHSUNDEEP
javascriptreactjs
user5992977
user5992977

Reputation:

React conditionally set navigation

I'm populating a table by mapping each row, and inside mapping each column . I want to enable a NavLink instance only if its the first column of each row . I also want to use the row ID and concat it to the path . Right now I have this:

       {props.tableData
        .map(n => {
          return (
            <TableRow key={n.id}>
              <TableCell component="th" padding="checkbox">
                <Switch
                  checked={n.commission === 1}
                  onChange={(event) => props.setPayment(n.id, event.target.checked)}
                  color="primary"
                />
              </TableCell>
              {
                Columns.map((c,index) => {
                  return (
                    index === 1 && <NavLink className={classes.navLink} activeClassName={classes.activeNavLink}  to "/brokers/".concat(n.id) >
                    <TableCell key={c.key} component="th" padding="checkbox">{c.format(n[c.key])}</TableCell>
                    index === 1 && <NavLink />
                  )
                })
              }
             ......

The concat fails:

to "/brokers/".concat(n.id)

And the conditional logic doesn't work .

How can I do it ?

Upvotes: 0

Views: 432

Answers (4)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You should use like this:

to={`/brokers/${n.id}`}

Index starts from 0 not from 1. So, you need to set the condition to match the zero:

index === 0 &&

This will fix your issues:

{
 index === 0 && 
 <NavLink 
  className={classes.navLink} 
  activeClassName={classes.activeNavLink} 
  to={`/brokers/${n.id}`}>
}
    <TableCell 
      key={c.key} 
      component="th" 
      padding="checkbox">
        {c.format(n[c.key])}
    </TableCell>
{index===0 && </NavLink>}
 // not <NavLink />

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104379

Changes (they will solve both the issues):

1- We can't return multiple elements, so use React.Fragment (it will not add extra node to DOM).

2- Use template literals to put the variable inside the string.

Use this Code:

{props.tableData
  .map(n => {
    return (
      <React.Fragment>
        <TableRow key={n.id}>
          <TableCell component="th" padding="checkbox">
            <Switch
              checked={n.commission === 1}
              onChange={(event) => props.setPayment(n.id, event.target.checked)}
              color="primary"
            />
          </TableCell>
          {
            Columns.map((c,index) => {

              const cell = <TableCell key={c.key} component="th" padding="checkbox">{c.format(n[c.key])}</TableCell>;

              if (index === 1) {
                return (
                  <NavLink key={c.key} className={classes.navLink} activeClassName={classes.activeNavLink}  to={`/brokers/${n.id}`} >
                    {cell}
                  </NavLink>
                )
              }
              return cell;
            })
          }
        </TableRow>
      </React.Fragment>
    )
  })
}

Upvotes: 2

xadm
xadm

Reputation: 8418

React is not string gluing. You can't do

return (
  index === 1 && <NavLink  >
    <TableCell />
  index === 1 && <NavLink />
)

You have to operate on whole objects, it should be sth like this

return (
  {index === 1 ? <NavLink  >
      <TableCell />
    </NavLink>
    : <TableCell />
  }
)

Upvotes: 0

Meir
Meir

Reputation: 14375

You can use an expression

to={`/brokers/${n.id}`}

Upvotes: 0

Related Questions