gistfile1.jsx

class Questions extends React.Component {
  render() {
    return (
      <div>
        <h2>opaaaa</h2>
      </div>
    )
  }
};

class Messages extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      messages: [],
      chatbot_groups: []
    };
  }

  componentDidMount() {
    axios.post('/api/v1/chatbot/get_messages', {chatbot_token: this.props.chatbot_token}).then((res) => {
      const messages = res.data.map((message) => { return message; });
      this.setState({messages});
      this.setState({chatbot_groups: JSON.parse(this.props.chatbot_groups)});
    });
  }

  render() {
    return (
        {this.state.messages.map((message) =>
          <div>
            <div className="card" key={message.id}>
              <div className="card-block">
                <div className="form-group row">
                  <label className="col-sm-3 col-form-label">Grupo da mensagem</label>
                  <div className="col-sm-9">
                    <select name="group[]" className="form-control">

                      {this.state.chatbot_groups.map((group) => 
                        <option key={group.id} defaultValue={group.id}>{group.name}</option>
                      )}

                    </select>
                  </div>
                </div>
                <div className="form-group row">
                  <label className="col-sm-3 col-form-label">Mensagem</label>
                  <div className="col-sm-9">
                    <textarea name="message[]" className="form-control" defaultValue={message.text}></textarea>
                    <small><%= "<!-line-> <!-message-> <!-slug:name->" %></small>
                  </div>
                </div>
                <div className="form-group row">
                  <label className="col-sm-3 col-form-label">Subtítulo</label>
                  <div className="col-sm-9">
                    <input type="text" name="subtitle[]" className="form-control" defaultValue={message.subtitle} />
                  </div>
                </div>
                <div className="form-group row">
                  <label className="col-sm-3 col-form-label">Slug</label>
                  <div className="col-sm-4">
                    <input type="text" name="slug[]" className="form-control" defaultValue={message.slug} />
                  </div>
                </div>
                <div className="form-group row">
                  <label className="col-sm-3 col-form-label">Intervalo (ms)</label>
                  <div className="col-sm-2">
                    <input type="text" name="delay[]" className="form-control" defaultValue={message.delay} />
                  </div>
                </div>
                <div className="align-end">
                  <a href="javascript:void(0)" className="btn btn-success"><i className="icofont icofont-check-circled"></i>Opções de resposta</a>
                </div>
              </div>
              <Questions />
            </div>
        )}
      </div>
    );
  };
};

ReactDOM.render(<Messages chatbot_token="<%= @chatbot.token %>" chatbot_groups='<%= @groups.to_json.html_safe %>' />, document.getElementById('react_container'));