ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

Best way to update passed-down props from controller?


I am trying to find out whether a method exist to do this or if there is a workaround; I will explain what I am trying to accomplish below, but to summarize the question: is there a way to update props that were passed down from rails controller without having to refresh the page?

Basically, when I started react-on-rails, its default controller looks like this:

def index
    @hello_world_props = { name: "Stranger" }

It passes down @hello_world_props to the React component.
I modified mine to look like:

  def index
    @scheduler_props = { currentUserId:, schedules: Schedule.where(user_id: }

Essentially it passes down current user’s id and an array of schedules. I created the corresponding states:

export default class App extends React.Component {
  static propTypes = {
    currentUserId: PropTypes.string.isRequired,
    schedules: PropTypes.array.isRequired

  constructor(props, _railsContext) {
    this.state = { currentUserId: this.props.currentUserId, schedules: this.props.schedules };

In my DB, I have one schedule saved already. Naturally, when I console.log(this.props.schedule), it displays one schedule. Still on the same page, I then POST another schedule.

However, when I console.log(this.props.schedules), it still shows one schedule, not two. I have to refresh the page before my this.props.schedules updates and displays two schedules.

Is there a way, using react-on-rails, to automatically update the incoming props from your controller without having to refresh the page, i.e., is there a way for me to update schedules: Schedule.where(user_id: whenever rails DB is updated?

Thanks, guys!!


You want to do an async call from your JavaScript to get new props.

If you want personalized help on this, please consider our Coaching Plan.