0

I have watched this talk and I am right now trying to use react components to show a list of messages (in a chat). So I have two react components:

1) The "Message" component that is basicaly an li with the message props (dateTime, userName, and body);

var Message = React.createClass({
  render: function () {
    return (
        <li className="right clearfix">
          <span className="chat-img pull-right">
          <div className="chat-body clearfix">
            <div className="header">
              <small className=" text-muted"> sent {this.props.dateTime}
              </small>
              <strong className="primary-font">{this.props.userName</strong>
             </div>
             <p>{this.props.body}</p>
          </div>
        </li>
    );
  }

});

2) The "Messages" component which is a ul that lists all the chat messages

var Messages = React.createClass({
    render() {
      var createMessage = ({dateTime, userName, body, id}) => <Message key={id} dateTime={dateTime} userName={userName} body={body} />;
      return <ul className="chat">{this.props.messages.map(createMessage)}</ul>;
    }
});

In my view this is what I have: 

<%= react_component('Messages', { messages: @messages }) %>

Nothing too complicated. The problem is that I don't know how to change the "message" component attributes. For example if I want to change the format of the messages created_at attributes ? Or the users names based on a model method ? Do I have to parse these "props" with json from the controller ?

I'm just trying to figure out how react could work with my rails app, please don't hesitate to leave any suggestion/info. Thanks in advance

Pardeep Dhingra
  • 3,916
  • 7
  • 30
  • 56
Badr Tazi
  • 749
  • 1
  • 6
  • 20
  • im having troubles understanding what you are trying to achieve. Do you want the possibility to render different types of messages ? – thsorens Nov 23 '15 at 11:42
  • I don't know how to change each message props such as `dateTime` and `userName` with rails methods. I can see in [the react-rails gem documentation](https://github.com/reactjs/react-rails#jbuilder--react-rails) that I can use jbuilder to pass a JSON string to the react_component but there's nothing that really explains how to do that. How can I pass the message.user.first_name for example ? – Badr Tazi Nov 23 '15 at 14:10

0 Answers0