2

If I want to route to a stateless component I use the component which will give me a match params

e.g.

<Route path="/ingredient/:ingredientID" component={IngredientPage} />

the problem with using the "component" attribute is I can't pass in a class function to be used. I'd like to fetch api data based on the id before I load the component and I want the component to be a function component.

if I use render I can't call a state change because that will re-render (infinite loop).

  <Route path="/ingredient/:ingredientID" render={(props) => {
    this.loadIngredient(props.match.params.ingredientID) 
    //this will change state which creates a loop
    return <IngredientPage ingredient={this.state.ingredient} />
   } />

So far the only way I can figure this out is making the component a state component like it's parent but then I am dealing with two states.

Any suggestions?

Ruegen
  • 605
  • 9
  • 35
  • Why do you insist on the component being functional? If you're retrieving data from an API based on a route param, then the best place to hold that data is in the component's state. On top of it, you can benefit from lifecycle methods to handle fetching your data, or to trigger a rerender if the param in the URL changes. Unless you have a very valid reason for your component to be stateless, this is a no brainer. – Thomas Hennes Dec 08 '17 at 10:52
  • I want stateless components, I like to keep the state in the main app and pass down any methods. It's far less complex and you don't have to keep track of different states. Sorry Jaxx but there are a fair few good reasons to have only one state. – Ruegen Dec 08 '17 at 11:10
  • Not in this case, no, it's quite the opposite. There's nothing wrong in having state in components that require it (those dealing with logic, user interaction or fetching/posting data) and none in those that don't (mainly presentational components). To have an ironclad rule about wanting state in one location only is counterproductive and completely arbitrary. But hey, good luck adding unnecessary complexity to your problem when solving it is actually very straightforward. – Thomas Hennes Dec 08 '17 at 11:16
  • When using react-router v4, there is no onEnter hook, that allows you to pre-fetch data before rendering, and it is suggested to do so in the lifecycle function of the component being rendered, plus the data being fetched is specific to the Ingredients component and it makes sense to store it in its state only – Shubham Khatri Dec 08 '17 at 11:17
  • Please read through these two answers https://stackoverflow.com/questions/46594900/reactjs-lifting-state-up-vs-keeping-a-local-state/47349693#47349693 , https://stackoverflow.com/questions/45429963/onenter-prop-in-react-router-v4/45430656#45430656 – Shubham Khatri Dec 08 '17 at 11:18
  • 2
    On the other hand, if you absolutely insist on having your state in one and one place only, switch to Redux, then you'll deal with application level state. – Thomas Hennes Dec 08 '17 at 11:19
  • I think it's a poor excuse for not thinking about how to apply it as a feature to react router.... here it doesn't do what you want. So do this and this instead... – Ruegen Dec 09 '17 at 09:30
  • Shubham Khatri - I'd rather not have to use redux just to have the ability to have a 'dumb' reusable component that shouldn't need to care about state. – Ruegen Dec 09 '17 at 09:32

0 Answers0