Cześć. Przerabiam właśnie poradnik “React On Rails” ze strony https://www.nopio.com/blog/react-rails-part-1-tutorial/
Jestem przy punkcie 16, robię dokładnie to co jest podane na stronie a mimo to nie pokazuje mi danych w tabeli (wchodząc na /api/events pokazuje wszystkie dane poprawnie)
Poradnik został napisany ok rok temu więc może pewne rzeczy są nieaktualne ale nie mam pojęcia gdzie jest błąd. Chodzi dokładnie o <tbody>{events}</tbody> w pliku event_table.js.jsx
root 'dashboard#index'
namespace :api do
resources :events
end
events_controller.rb:
module Api
class EventsController < ApplicationController
def index
render json: Event.all
end
end
end
dashboard/index.html.erb:
<%= react_component 'EventApplication' %>
event_application.js.jsx:
var EventApplication = React.createClass({
getInitialState: function() {
return { events: [] };
},
componentDidMount: function() {
this.getDataFromApi();
},
getDataFromApi: function() {
var self = this;
$.ajax({
url: '/api/events',
success: function(data) {
self.setState({ events: data });
},
error: function(xhr, status, error) {
alert('Cannot get data from API: ', error);
}
});
},
render: function() {
return(
<div className="container">
<div className="jumbotron">
<h1>ReactJS</h1>
<p>tutorial</p>
</div>
<div className="row">
<div className="col-md-12">
<EventTable events={this.state.events} />
</div>
</div>
</div>
)
}
});
event_table.js.jsx:
var EventTable = React.createClass({
render: function() {
var events = [];
this.props.events.forEach(function(event) {
events.push(<Event event={event}
key={'event' + event.id}/>);
}.bind(this));
return(
<table className="table table-striped">
<thead>
<tr>
<th className="col-md-3">Name</th>
<th className="col-md-2">Date</th>
<th className="col-md-3">Place</th>
<th className="col-md-4">Description</th>
</tr>
</thead>
<tbody>
{events}
</tbody>
</table>
)
}
});
event.js.jsx:
var Event = React.createClass({
propTypes: {
name: React.PropTypes.string,
event_date: React.PropTypes.string,
place: React.PropTypes.string,
description: React.PropTypes.string
},
render: function() {
var event = this.props.event;
return(
<tr>
<td>{event.name}</td>
<td>{event.event_date}</td>
<td>{event.place}</td>
<td>{event.description}</td>
</tr>
)
}
});