Issues passing props to page via routing

Question

I am a novice in ReactJs. I have created a small application that populates a grid with users and upon the clicking of a button associated with a user, the application will redirect to a page containing info about the user (passed as props). I have used a router for handling this page request:

<Router>
<Route path="/" header="Main Page" component={() => (<MainPage content={users}/>)}>
</Route>
<Route path="/UserName" header="User Page" component={UserPage}/>
</Router>

The grid page, which works correctly and gets the data as prop from a parent component is the following:

var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;
var Prompt = require('../components/Prompt');

var UsersList = React.createClass({
  accessUserInfo: function (user) {
    this.context.router.push('/UserName', query={user});
  },
  render: function(){
    return(
      <form>
       <table>
        <tbody>
        <tr>
          <th>Name</th>
          <th>Surname</th>
          <th>Day of Birth</th>
          <th>Username</th>
          <th>Role</th>
          <th></th>
        </tr>
        {this.props.content.map(function(user, i) {
          return (
            <tr key={i}>
              <td>{user.name}</td>
              <td>{user.surname}</td>
              <td>{user.birthday}</td>
              <td>{user.userName}</td>
              <td>{user.userRole}</td>
              <td>
                <Link>
                  <button type="submit" onSubmit={this.accessUserInfo(user)}>Open</button>
                </Link>
              </td>
            </tr>
          );
        }.bind(this))}
        </tbody>
      </table>
    </form>
   )
 }

})

UsersList.contextTypes = {
  router: React.PropTypes.object.isRequired
}

module.exports = UsersList;

The user page, very basic, is the following:

var React = require('react');

var UserPage = React.createClass({
  render: function () {
   return(
  <table>
    <tbody>
    <h1>
    Information for User {this.props.user.userName}
    </h1>
    <tr>
      <td>Name: </td>
      <td>{this.props.user.name}</td>
      </tr>
    <tr>
      <td>Surname: </td>
      <td>{this.props.user.surname}</td>
    </tr>
    <tr>
      <td>Role: </td>
      <td>{this.props.user.userRole}</td>
    </tr>
    </tbody>
  </table>
)

}});

module.exports = UserPage;

I am having 2 issues:

The accessUserInfo() method is called for each item in the array, regardless ofthe button being clicked
The user page loads, but the user props is not passed to the component, as I get

cannot read property 'userName' of undefined

Any help would be immensely appreciated, thanks in advance

Try like this `onSubmit={() => this.accessUserInfo(user)}` – elmeister Sep 22 '16 at 15:17 — elmeister, Sep 22 '16 at 15:17

score 2 · Answer 1 · edited May 23 '17 at 10:30

To avoid accessUserInfo() being called for each ítem, use the arrow function sintax: onSubmit={()=>this.accessUserInfo(user)}

But I think that you don't need that method and you need to change your design a little bit because you can't send objects as properties. If you are going to send, for example, the ID of the user (in order to get the user at the UserPage Component from a store or API), you can set the properties directly with the Link. It's explained here. Just use, for example

<Link to={"UserName/"+userId}></Link>

after changing the Route to something like

<Route path="/UserName/:userId" header="User Page" component={UserPage}/>

Issues passing props to page via routing

1 Answers1