CODEWITHSUNDEEP
reactjsreact-router-dom
Denis J
Denis J

Reputation: 119

React component redirect with onClick of table row that already has another onClick

I have a table row that already has an onClick, which is used to send data to a api in order to render new content.. Presently I have that api rendering to the landing page. I would however like the data to render to a separate page/pathway.

Do I want to use Redirect, Link, another onClick, etc.. Just confused on where to start and the best method to use.

const SearchResults = props => (
     <tbody>

{ props.contracts.map((contract, i) => 

    <tr key={i} data-id={contract.Id}  
        onClick={() => props.handleContract(contract.Fields.filter(field => field.DataField==="IDXT001").map(field => field.DataValue))} 
        >{contract.Fields.map( docs =>  
        <td key={docs.Id}><span id={docs.DataField}>{docs.DataValue}</span></td>)}
    </tr> )}

      </tbody>
   )

Here is my main class page. I would like the Pdfs to load on a new page.

      <SearchResults 
    labels={this.state.labels}
    contracts={this.state.contracts} 
    pdfs={this.state.pdfs}
    handleContract={this.onClick}
    />
  <Pdfs 
    labels={this.state.labels}
    contracts={this.state.contracts} 
    pdfs={this.state.pdfs}
    />

Here is my App.js

    class App extends Component {
  render() {
    return (
      <div className="App">
      <BrowserRouter>
      <div>
        <Header />
        <Route exact path="/" component={Search} />
        <Route path="/pdfs" component={Pdf} />
        <Footer />
        </div>
        </BrowserRouter>
      </div>
    );
  }
}

Upvotes: 0

Views: 1214

Answers (2)

Joshua Paul Huang
Joshua Paul Huang

Reputation: 123

You can modify your onClick function to do some calculation on where you need to go based on where you are in the router history

Upvotes: 0

lakerskill
lakerskill

Reputation: 1079

In your method you could use:

this.props.history.push({
  pathname: '/yourpath',
  state: { labels={this.state.labels}
    contracts={this.state.contracts} 
    pdfs={this.state.pdfs} }
})

Upvotes: 1

Related Questions