Using the show route in react + rails

Question

I'm building out a simple quiz app with a rails api rendering the questions in json and react pulling them in. However I'm not very experienced with react and I'm having trouble working out how to go about getting one question at a time displayed on the screen as the display is the same going to localhost:3000 or localhost:3000/questions/1. Any advice on how to get it using the show method when appropriate instead of index for everything would be really appreciated.

  componentDidMount() {
    axios.get('http://localhost:3001/api/v1/questions.json')
    .then(response => {
      console.log(response)
      this.setState({questions: response.data})
    })
    .catch(error => console.log(error))
  }

NiftyAsp · Accepted Answer · 2018-02-21 20:06:47Z

1

your index route should show all the questions

So:

def index
    questions = Question.all
    however_you_render_json(questions)
end

And your show route should take the id from the URL and show one questions from that

def show
    question = Question.find(params[:id])
    however_you_render_json(question)
end

in your routes.rb file you should have

resources :users

which which automatically create the required routes, you can run bundle exec rake routes in rails console to verify the URI patterns

On the React end, the requests should be: axios.get('http://localhost:3001/api/v1/questions/) for index or axios.get('http://localhost:3001/api/v1/questions/1) for show.

edited Feb 21, 2018 at 20:06

answered Feb 21, 2018 at 19:46

NiftyAsp

6504 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

poppashingles Over a year ago

Thanks for you response, I have those parts of it in exactly as you've described and the routes are showing in rake routes as they should. For some reason it just won't transfer over into the react to use the show route, it seems to take the index for every address

NiftyAsp Over a year ago

Can you edit your question to include the calls to your Rails API?

poppashingles Over a year ago

I've added the request in and I see what you mean now, sorry. My request is always grabbing all questions, do I need a separate request to get the question by id?

NiftyAsp Over a year ago

Your get method seems to be grabbing a static json file from the server. it should be axios.get('http://localhost:3001/api/v1/questions/) for index or axios.get('http://localhost:3001/api/v1/questions/1) for show. Again, check the output of rake routes to determine the proper url

poppashingles Over a year ago

Right, ok, this is making a lot more sense :) Ok, so now I just need to work out how to do multiple views in react, not covered that at all, and use the request for the specific question I need. Awesome, thank you

|

Collectives™ on Stack Overflow

Using the show route in react + rails

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related