title: Favorites saving on backend, but against all users not the current user logged in
body: <p>I am creating an app where one of the functionalities is to make it so that the current user logged in can save a coffee shop to their favorites list.  Right now my favorites are currently working, however when it saves on the backend it saves against all users not just the current user logged in.  Im using a rails backend with JWT Auth and React frontend. I attempted to correct this by doing something like this in my FavoritesController...</p>
  <pre><code>....
   def index
          favorites = Favorite.where(user_id: params[:user_id])
          render json: favorites
      end
  
  </code></pre>
  <p>and then on the front end trying to grab the user_id in my GET and POST request such as;</p>
  <p>Get Request ...</p>
  <pre><code>...
      componentDidMount() {
        fetch(`http://localhost:3000/favorites?user_id=${user_id}`)
        .then(resp =&gt; resp.json())
        .then(favorites =&gt; this.setState({ favorites }))
      }
  </code></pre>
  <p>Container ...</p>
  <pre><code>import React from 'react';
  import CoffeeShop from './CoffeeShop'
  import NavBar from './NavBar'
  
  class CafesContainer extends React.Component {
  
    state = {
      cafes: [],
      cafe:{},
      isCafeViewOn: false,
      inputValue: '',
      inputSort: '',
      user: {
        id:0,
        username:'',
        token:'',
      }
  }
  
  ...
  
  addToFav = (cafe) =&gt; {
    console.log(cafe)
    fetch(`http://localhost:3000/favorites?user_id=${user_id}`,{
      method: &quot;POST&quot;,
      headers: { 
        &quot;Content-Type&quot; : &quot;application/json&quot;,
        Accept: &quot;application/json&quot;,
        Authorization: `bearer ${localStorage.token}`
      },
        body: JSON.stringify( cafe )
    })
    .then(res =&gt; res.json())
    .then(console.log)
    }
  
   ...
    
  render() {  
    
  ...
  
        &lt;input type=&quot;text&quot; className=&quot;cafe-search-bar&quot; placeholder=&quot;Type Cafe Name Here...&quot; value={this.inputValue} onChange={(e) =&gt; {this.cafeFilterOnChange(e)}}/&gt;
  
        &lt;ul&gt;
          {
             filteredCafes.map(cafe =&gt; &lt;CoffeeShop cafes={this.filteredCafes} handleCafeView={this.handleCafeView} cafeFilterOnChange={this.cafeFilterOnChange} inputValue={this.inputValue}
             addToFav={this.addToFav} key={cafe.id} cafe={cafe} /&gt;)
          }  
        &lt;/ul&gt;
       &lt;/div&gt;
      )
    }
  }
  ;
    export default CafesContainer;
  </code></pre>
  <p>However when I try to do his way against by fetching the user_id and posting with the user_id I get a error on the frontend stating</p>
  <pre><code>'user_id' is not defined  no-undef
  </code></pre>
  <p>from what im gathering its not getting the state of the user even tho im setting at the top in state, im able to get this to work if I do something like this</p>
  <pre><code>   componentDidMount() {
        fetch(`http://localhost:3000/favorites`)
        .then(resp =&gt; resp.json())
        .then(favorites =&gt; this.setState({ favorites }))
      }
  
  ...
  
  addToFav = (cafe) =&gt; {
    console.log(cafe)
    fetch(`http://localhost:3000/favorites`,{
      method: &quot;POST&quot;,
      headers: { 
        &quot;Content-Type&quot; : &quot;application/json&quot;,
        Accept: &quot;application/json&quot;,
        Authorization: `bearer ${localStorage.token}`
      },
        body: JSON.stringify( cafe )
    })
    .then(res =&gt; res.json())
    .then(console.log)
    }
  </code></pre>
  <p>but this is setting it for all users not just the current user logged in..</p>
  <p>Any advise would be great!!</p>
  <p>Thank you!</p>