last day (15 days later) » 

11:02 PM
0
Q: How to add or delete objects from React - Rails?

DudisI have a Rails app with react-rails gem. This is my controller: class WebsitesController < ApplicationController def index @websites = Website.all end end This is my view: <%= react_component('WebsiteList', websites: @websites) %> This is my React component wit: class WebsiteList...

 
I'm not sure I understand but can you not use React's setState in the done callback to change the state of the component?
 
I tried to do it - like now I have "this.props.websites" that I got from PropTypes websites: React.PropTypes.node. I tried to do this.state = {websites: ...} but didn't figure out what should be instead the three dots.
 
Oh gotcha will post an answer in a bit.
 
I actually managed it by passing an argument in constructor but now I am thinking how to add website and update the this.state.websites
 
Can you share the source code so that I'm on the same page?
 
11:02 PM
Sure :) sorry it's quite confusing the question now. This is the source code: github.com/Dudisek/react-rails/tree/master/app/assets/… there is a dashboard and two components with ajax requests - one add_website and second delete_website. It's going to the server but I'd like to update also the this.state.websites (receiving new data from the server in json)
 
ok that's helpful, you're very close now and you did the right step ahead
 
Hi marek
Thanks so much for your help
 
writing an answer
 
now I am thinking how to add the website and update the state. One solution I have in mind is to have a single component with access to the state and easily update it. But not sure if this would be the right method as it could be quite messy with the ajax etc
 
you'll see in the answer
putting it together now
done
let me know if it worked and helped you, I didn't have time to checkout your project locally
 
11:28 PM
Perfect, I am going to try it
just wondering if it's better to do this way or having one robust websitelist component with the state
 
just don't forget to return new website object from the create endpoint
when you don't want to complicate it further by adding a state management library, having a state in the top level app component is just fine
oh forgot to bind the done callback so that this is the right object, edited the answer
i am so used to arrow functions but I'm not sure what subset of ES6 is available in your case
 
I tried it and it works perfectly! Thank you so much. Will go ahead with the destroy method now :)
Accepted it for answer. Thanks for your time!
 
11:44 PM
hehe no problem at all!
 

last day (15 days later) »