0

Am having difficulty getting a component to render in a tutorial app am creating using React-Rails, can anyone have a look and point out where the problem could be please. I have googled around and searched stackoverflow but cant seem to find a pointer or workable solution.

Heres my code:

app/assets/javascripts/components/appointments.js.jsx 

var Appointments = createReactClass({  

  render: function() {
    return (
     <React.Fragment>
       <div>
         <AppointmentForm />
         {this.props.appointments.map(function(appointment) {
           return (
             <Appointment appointment={appointment} />
           )
         })}
       </div>
     </React.Fragment>
   );
  }
});

app/assets/javascripts/components/appointment.js.jsx

var Appointment = createReactClass({

   render: function() {
     return (
       <React.Fragment>
         <div>
           <h4>{this.props.appointment.title}</h4>
           <p>{this.props.appointment.apt_time}</p>
         </div>
       </React.Fragment>
     );
   }
});

app/views/appointments/index.html.erb

<h1>XYZ</h1>
<h2>Appointments or Events Schedule</h2>

<br>
  <%= render 'appointments' %>

app/views/appointments/create.js.erb

# Handler for response of AJAX request, using the DIV with id= "appointments"
<plain>
  $('#appointments').html("#{escape_javascript(render 'appointments')}");
</plain>

Up to this point, everything seems to render until i get to the AppointmentForm component below, which fails to render:

app/assets/javascripts/components/appointment_form.js.jsx

var AppointmentForm = createReactClass({

  render: function() {
    return (
      <React.Fragment>
        <div>
          <h3>Make a New Appointment</h3>
          <form>
            <input name='title' placeholder='Appointment Name' />
            <input name='apt_time' placeholder='Date and Time' />
            <input type='submit' value='Make Appointment' />
          </form>
        </div>
      </React.Fragment>
    );
  }
});

Additionally, i have:

app/views/appointments/_appointments.html.erb

<% @appointments.each do |a| %>
  <h5>
    <%= a.title %><br>
  </h5>
  <p>
    <%= a.apt_time %>
  </p>
<% end %>

app/controllers/appointments_controller.rb

class AppointmentsController < ApplicationController
    def index
      # define appointments method to GET appointments (or events) and display in ascending (ASC) time order
      @appointments = Appointment.order('apt_time ASC')
      # define appointment as a new record
      @appointment = Appointment.new
   end

      # POST request to appointments (or events)
   def create
      @appointment = Appointment.create(appointment_params)
      # Send new latest set of appointments in our response from 
      # the action. No need for the redirect anymore
      @appointments = Appointment.order('apt_time ASC')
   end


   private
   def appointment_params
      params.require(:appointment).permit(:title, :apt_time)
   end  

end

I am wondering why the appointment form fails to render? Any suggestions or assistance is welcome please.

All_J
  • 1
  • 2
  • not really connected to your issue, but remember declaring type of inputs in your form. And secondly: how exactly do you export `AppointmentForm` and import it in your `appointments.js.jsx` ? – seethrough Jun 14 '18 at 14:32
  • i believe adding it in the form above the props in appointments.js.jsx is supposed to do that? Otherwise let me have alternative view, no bother – All_J Jun 14 '18 at 15:52

0 Answers0