CODEWITHSUNDEEP
ruby-on-railsreactjs
Trinity76
Trinity76

Reputation: 665

get data from Rails into react component

I use Rails 5.1 with react-on-rails gem and the current-version of react-table and have the issue how to get data from Rails into the react component.

WorkingHoursCs.jsx:

  import ReactTable from 'react-table';

  export default class WorkingHoursCs extends React.Component {

  return (
    <ReactTable
          data={working_hours_cs_for_react}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        )
    }
  }

Rails Controller WorkingHoursCsController with an array @working_hours_cs_for_react that I want to load into the react component:

class WorkingHoursCsController < ApplicationController

  def index
    @search = WorkingHoursCs.ransack(params[:q])
    @working_hours_cs = @search.result
    @working_hours_cs_for_react = @search.result.to_json
  end

and in app/views/working_hours_cs/index.html.erb:

<%= react_component("WorkingHoursCs", working_hours_cs_for_react: @working_hours_cs_for_react, prerender: false) %>

But I get the error message in Browser console:

Original message: working_hours_cs_for_react is not defined

How can i make the @working_hours_cs_for_react available in the react component?

Upvotes: 0

Views: 1196

Answers (1)

StandardNerd
StandardNerd

Reputation: 4183

There are some refactoring needed in your code but to get the error message fixed try:

<%= react_component("WorkingHoursCs", props: { working_hours_cs_for_react: @working_hours_cs_for_react }, prerender: false) %>

and

    <ReactTable
      data={this.props.working_hours_cs_for_react}
      columns={columns}
      defaultPageSize={10}
      className="-striped -highlight"
    />

Upvotes: 2

Related Questions