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

Best way to update passed-down props from controller?


#1

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" }
  end

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

  def index
    @scheduler_props = { currentUserId: current_user.id.to_s, schedules: Schedule.where(user_id: current_user.id.to_s) }
  end

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) {
    super(props);
    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: current_user.id.to_s) whenever rails DB is updated?

Thanks, guys!!


#2

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.