CODEWITHSUNDEEP
javascripthtmlreactjs
js_248
js_248

Reputation: 2112

Rendering data on link click on a different tab

I have this Test as react component which is having a link book.When I click this link I want to open a new tab with url /book-data and render Book component.Also I have to pass book_id from Test to Book as Book is showing this data.

class Test extends React.Component {

  render() {
  const book_id = 123;
    return (
      <div>
        <a href="/book-data">book</a>
      </div>
    )
  }
}

export default Test;

Book component showing book_id

import React from "react";
class Book extends React.Component {

  render() {
    return (
      <div>
        {this.props.book_id}
      </div>
    )
  }
}

export default Book;

Upvotes: 2

Views: 171

Answers (1)

neha soni
neha soni

Reputation: 221

Define your Route something like this:

<Route path="book-data/:id" component={Book} />

Then from Test Component render Book Component

render() { const book_id = 123; return ( <div> <a href="/book-data/{book_id}">book</a> </div> ) }

Now in Book Component you can get book_id like this:

componentDidMount(){ var book_id = this.props.params.id; }

Upvotes: 1

Related Questions