CODEWITHSUNDEEP
reactjs
Mohamad reza1987
Mohamad reza1987

Reputation: 323

Click on card then navigate to card page details in react

I created a page and show some card also some little details of cards Now I want to click on any card navigate to this on show all details How can I get to this page on react js ? Is this need to Redux ?

Upvotes: 0

Views: 10028

Answers (2)

ATUL DIVEDI
ATUL DIVEDI

Reputation: 156

No need of Redux for your issue.

You just use React-router. you just create two component 1. Cards.js, 2. CardDetails.js and navigate to card details on click event of cards in Card.js

Cards.js

import React from "react";
import { withRouter } from "react-router";


class Cards extends React.Component {

goToCarddetails = (cardId) => {
    localStorage.setItem("selectedCard", cardId);
    this.props.history.push('/card-details');
// you can manage here to pass the clicked card id to the card details page if needed
}

render() {
    return ( <div>
        <div onClick = {()=>this.goToCarddetails('cardId1')}> card 1 </div>
        <div onClick = {()=>this.goToCarddetails('cardId2')}> card 2 </div>
        <div onClick = {()=>this.goToCarddetails('cardId3')}> card 3 </div>
       </div>
    )
  }
}

export default withRouter(Cards);

With above on clicking any card you will be navigated to card details page.

CardDetails.js 

import React from "react";


class CardDetails extends React.Component {

render() {
    let selectedCardId = localStorage.getItem("selectedCard");
    // you can get this cardId anywhere in the component as per your requirement 
    return ( <div>
        card details here
       </div>
    )
  }
}

export default CardDetails;

Note : I'm using react-router 4 here in example.

Upvotes: 0

Bilal Kazmi
Bilal Kazmi

Reputation: 179

I couldn't understand what you said completely, but you can use React-Router to navigate to different pages in Reactjs. To install it using npm, go to your Application directory and enter in command line npm install --save React-Router

Here is a simple code to navigate to different pages:

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";


const Home=()=>
 (<div>
  <h2>Home</h2>
 </div>
);

const About=()=>
(<div>
  <h2>About</h2>
   </div>
 );


class App extends React.Component {
 render() {
    return (
  <Router>
    <div>

        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>




      <Route exact path="/" component={Home}/>
      <Route exact path="/about" component={About}/>
    </div>
  </Router>
      );
    }
  }
export default App;

I hope it helped...

Upvotes: 1

Related Questions