javascript - Issues passing props to page via routing -

i novice in reactjs. have created small application populates grid users , upon clicking of button associated user, application redirect page containing info user (passed props). have used router handling 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, works correctly , gets data prop parent component 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, basic, following:

var react = require('react');  var userpage = react.createclass({   render: function () {    return(   <table>     <tbody>     <h1>     information 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 having 2 issues:

• the accessuserinfo() method called each item in array, regardless ofthe button being clicked
• the user page loads, user props not passed component,

cannot read property 'username' of undefined

any immensely appreciated, in advance

to avoid accessuserinfo() being called each ítem, use arrow function sintax: onsubmit={()=>this.accessuserinfo(user)}

but think don't need method , need change design little bit because can't send objects properties. if going send, example, id of user (in order user @ userpage component store or api), can set properties directly link. it's explained here. use, example

<link to={"username/"+userid}></link>

after changing route

<route path="/username/:userid" header="user page" component={userpage}/>