title: React - Add user to list of Favorites
body: <p>I have a simple user list with several details from the following api: <a href="https://gorest.co.in/public-api/users" rel="nofollow noreferrer">https://gorest.co.in/public-api/users</a>, where I want to add a selected user to a list of favorites. I am working with react-router to navigate between pages. Is this possible with React or do I also need Redux?</p>
  
  <p>I have a complete <a href="https://codesandbox.io/s/crimson-feather-8l6kn" rel="nofollow noreferrer">LIVE EXAMPLE</a> here with the user page and favorites.</p>
  
  <p>Here is the code below for the user list:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import axios from "axios";
  
  import NavLinks from "./components/navLink";
  
  export default class UserList extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        list: [],
        addToFav: false
      };
      this.list = [];
    }
  
    componentDidMount() {
      this.getList();
    }
  
    /* get users list */
    getList = async () =&gt; {
      const api =
        "https://gorest.co.in/public-api/users?_format=json&amp;access-token=3qIi1MDfD-GXqOSwEHHLH73Y3UitdaFKyVm_";
  
      await axios
        .get(api)
        .then(response =&gt; {
          this.list = response.data.result;
          this.setState({
            list: this.list
          });
        })
        .catch(err =&gt; {
          console.log(err);
        });
    };
  
    addToFav = () =&gt; {
      this.setState(
        {
          addToFav: !this.state.addToFav
        },
        () =&gt; console.log(this.state.addToFav)
      );
    };
  
    render() {
      let style = {
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
        padding: "1rem",
        gridGap: "1rem 1rem"
      };
  
      return (
        &lt;div&gt;
          &lt;NavLinks /&gt;
          &lt;ul style={style}&gt;
            {this.state.list.map(user =&gt; {
              return (
                &lt;li key={user.id}&gt;
                  &lt;div&gt;
                    &lt;img className="thumb" alt="" src={user._links.avatar.href} /&gt;
                  &lt;/div&gt;
  
                  &lt;div className="userInfo"&gt;
                    &lt;p&gt;
                      {user.first_name} {user.last_name}
                    &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;button onClick={this.addToFav}&gt;Add to Favorites&lt;/button&gt;
                &lt;/li&gt;
              );
            })}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>Thank you! </p>