CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-bootstrapreact-router-dom
michasacuer2
michasacuer2

Reputation: 65

React pass object by routing?

What I want to do is set routing to my object. For example:

I set routing for:

http://localhost:3000/projects

It displays all my projects list (it works pretty ok)

Then I want to choose project and see details, but it doesn't work properly:

http://localhost:3000/projects/3

How it looks like:

View of my projects list

When I click to Details button, it sends me to /projects:id but I get an error, that items in project are undefined.

My code. I store all routing in main App.js file:

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Route exact path="/projects" component={ProjectsList} />
            <Route exact path="/projects/:id" component={ProjectDetails} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

I have ProjectsList.js component (i will include code of it if needed), in ProjectsList.js i have listgroup with Project.js that looks like this:

class Project extends Component {
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name</ListGroupItem>
        <Link to={`/projects/${this.props.project.id}`}>
          <Button>Details</Button>
        </Link>
      </ButtonToolbar>
    );
  }
}
export default Project;

By Link to my browser pass me to proper URL (projects/2... etc) but i dont know how to pass object of project to ProjectDetails.js component. Code of it below:

class ProjectDetails extends Component {
  render() {
    return <li>{this.props.project.description}</li>;
  }
}
export default ProjectDetails;

Could you tell me, how to pass object of project by Link to into ProjectDetails.js? For now, i get description as undefined (its obviouse because i pass nothing to component with details).

Upvotes: 5

Views: 5408

Answers (3)

onejeet
onejeet

Reputation: 1191

Use the render method in your route and pass the props.

   <Route exact path="/projects/:id" render={() => (
         <ProjectDetails
         project = {project}
         />
   )}/>

Upvotes: 1

Harish Soni
Harish Soni

Reputation: 1896

This is what it will look like..!!

class Project extends Component {
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name</ListGroupItem>
        <Link to={`/projects/${this.props.project.id}`}>
          <Button>Details</Button>
        </Link>
      </ButtonToolbar>
    );
  }
}

function mapStateToProps(state, ownProps){
   return { project : { id: ownProps.params.id } }
}

export default connect((mapStateToProps)(Project))

Upvotes: 0

Harish Soni
Harish Soni

Reputation: 1896

You need to use mapStateToProps here. and wrap your component in the conncet from react-redux.

It should be like:

import {connect} from 'react-redux';

class ProjectDetails extends Component {
  render() {
    return <li>{this.props.project.description}</li>;
  }
}

function mapStateToProps(state, ownProps){
   const projectInstance = DATA //the Data you are getting or fetching from the ID.
   return { project : projectInstance }
}

export default connect((mapStateToProps)(ProjectDetails))

Upvotes: 1

Related Questions