How to open and pass the data when click is applied on table?

Question

I am trying to create a clickable table, in row manner. When the row is clicked, I would like to open a page and passing the data. Data from the row. At the moment the click works as the console prints. However, I am unable to pass the data and open the page.

Can someone help or guide me how to achieve this?

When I click the row, I can see on console the output. However, it doesn't go to the /flight-detail and pass the data.

FlightList.js

<tbody>
    {flights.map((f, i) => {
        return (
            <tr key={i} onClick={() => handleClick(f)}>
            <td>{f.date}</td>
            <td>{f.flightNumber}</td>
            <td>{f.origin}</td>
            <td>{f.destination}</td>
            </tr>
        );
    })}
</tbody>

Click handler method:

function handleClick(e) {
    // THIS PRINTS AND WORKS
    console.log("clicked", e.flightNumber, "...", e.origin); 

    <Link to={{ pathname: "/flight-detail", data: e }}></Link>;
}

App.js

    ...
    ...
    <Route path="/flight-detail" component={FlightDetail} />

Try passing the event and data in handleClick function. What is the error thrown in the console? — Praveen Jaya Kumar Ramesh, Nov 13 '19 at 14:21
https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router — IgorK, Nov 13 '19 at 14:26

score 0 · Answer 1 · answered Nov 13 '19 at 15:45

You can send data with state variable

function handleClick(e) {
  console.log("clicked", e.flightNumber, "...", e.origin); // IT PRINTS AND WORKS
  <Link
    to={{
      pathname: "/flight-detail",
      state: {
        data: e
      }
    }}
  ></Link>;
}
...

class FlightDetail extends React.Component {
  state = {
    data: null,
    ...
  }
  componentDidMount () {
    const { data } = this.props.location.state;
    this.setState({ data: data });
    ...
  }
  render() {
    ...
  }
}

The `Link` isnt working. I am not able to go to `FlightDetail` page — Daniel, Nov 13 '19 at 16:15

How to open and pass the data when click is applied on table?

1 Answers1