Get current user's profile with rails and react

Question

I'm finally taking the leap and learning React with Rails. Currently at the basics and need some help showcasing the current logged in users profile link. I understand the process of doing this just need help with execution.

Before, a link to the currentUser's profile with erb was like this

<li><%= link_to 'Profile', current_user %></li>

I'm now rendering my 'Navbar' component like so

<%= react_component 'Navbar' %>

and this is the actual component:

var Navbar = React.createClass({
  getInitialState() {
      return {
      };
  },
  getDefaultProps() {
      return {
          siteTitle: "React Test"  
      };
  },
  render: function() {
    return(
      <div className="navi">
        <div className="logo">
          <h1>{this.props.siteTitle}</h1>
        </div>
        <ul className="nav">
          <li className="item">
            <a href="#" className="hvr-float-shadow">Profile</a>
          </li>
        </ul>
      </div>
    )
  }
});

How do I set the current user id in the component state.

Answer 1

Use props to pass in data:

<%= react_component('Navbar', current_user: current_user)  %>

Assuming your profile path is something like:

localhost:3000/profile/:id

Then your react would be:

var Navbar = React.createClass({
  getInitialState() {
    return {
      currentUser: this.props.current_user
    };
  render: function() {
    return (
      <ul>
        <li>
          <a href={"localhost:3000/profile/"+ this.state.currentUser.id}>Profile</a>
        <li>
      <ul>
    );
  }
},