Search code examples
ruby-on-railsrubyreactjsreact-rails

React Rails: Objects are not valid as a react child


I'm using rails 5.1 with the react-rails gem.

My model has a "start_time" column that uses the "tod" (time of day gem), so it is serialized in my model like this:

serialize :start_time, Tod::TimeOfDay

I need to parse this time in my react view, but I don't understand how to render the resulting object.

console.log(@props.booking.start_time) #=> Object {hour: 10, minute: 15, second: 0, second_of_day: 36900}

When I try to render it in a view I get this error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {hour, minute, second, second_of_day}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

Should I parse the attribute in the model before sending it to react, or there is a react way to parse (and format) the array?

EDIT: added the view code

@Booking = React.createClass
  render: ->
    React.DOM.tr null,
      React.DOM.td null, @props.booking.start_time

Solution

  • let time = @props.booking.start_time
    let timeToDisplay = time["hour"] + ":" + time["minute"] + ":" + time["second"]
    


    Do it like this and pass that value to td. i think it works.

    React.DOM.td null, timeToDisplay