title: Filter out tickets by event_id
body: <p>I'm trying to filter out all the tickets to a corresponding <code>event_id</code>.
  When you create a ticket (that happens inside the clicked on event, which has an id), 
  it adds all the values to the database plus the <code>event_id</code> you're inside of.</p>
  
  <p>Inside the event component, I map over all the tickets in the database 
  and I want to filter out the tickets to the corresponding event (i.e display only the tickets that have the clicked on events Id) </p>
  
  <p>but when I try to  <code>--(console.log(tickets.events)--</code> the events object inside the tickets array, 
  it returns undefined.
  The image displays the <code>--console.log(tickets)--</code></p>
  
  <p>[![Console and State][1]][1]
  <a href="https://i.stack.imgur.com/UsZNM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UsZNM.jpg" alt="enter image description here"></a></p>
  
  <p>my code</p>
  
  <pre><code>import React, { PureComponent } from "react";
  import { connect } from "react-redux";
  import { Link } from "react-router-dom";
  import { getAllTickets, getTicket, addTicket } from "../../actions/tickets";
  import { getCurrentUser, getUsers } from "../../actions/users";
  import { getAllEvents, getEvent } from "../../actions/events";
  import Paper from "@material-ui/core/Paper";
  import { Redirect } from "react-router-dom";
  
  
  
  class TicketsList extends PureComponent {
    componentWillMount() {
      this.props.getAllTickets();
      this.props.getAllEvents();
    }
  
    getTicket(ticketId) {
      this.props.getTicket(ticketId);
    }
    getEvent(eventId) {
      this.props.getEvent(eventId);
    }
  
    getCurrentUser(userId) {
      this.props.getCurrentUser(userId);
    }
  
    addTicket = ticket =&gt; {
      this.props.addTicket(ticket);
    };
  
    render() {
      const { tickets, events, authenticated } = this.props;
      const ticketsList = tickets.sort((a, b) =&gt; {
        return a.id - b.id;
      });
  
      if (!authenticated) return &lt;Redirect to="/login" /&gt;;
  
      console.log(tickets[0].events);
  
      return &lt;div&gt;
          &lt;Paper className="styles" elevation={4}&gt;
            &lt;h1&gt;Available Tickets&lt;/h1&gt;
  
            &lt;table&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Author&lt;/th&gt;
                  &lt;th&gt;Price&lt;/th&gt;
                  &lt;th&gt;Description&lt;/th&gt;
                &lt;th&gt;events id&lt;/th&gt;
  
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {ticketsList.map(ticket =&gt; &lt;tr key={ticket.id}&gt;
                    &lt;td&gt;
                      &lt;Link className="link" to={`/tickets/${ticket.id}`} onClick={() =&gt; this.getTicket(ticket.id)}&gt;
                        {ticket.users.firstName}
  
                      &lt;/Link&gt;
                    &lt;/td&gt;
  
                    &lt;td&gt;€{ticket.price}&lt;/td&gt;
  
                    &lt;td style={{ border: "2px solid black" }}&gt;
                      {ticket.description}
                    &lt;/td&gt;
                &lt;td style={{ border: "2px solid black" }}&gt;
                  {ticket.events.id}
                &lt;/td&gt;
  
                    &lt;td /&gt;
                  &lt;/tr&gt;)}
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;Link className="link" to={`/addTicket`}&gt;
              ADD TICKET
            &lt;/Link&gt;
          &lt;/Paper&gt;
        &lt;/div&gt;;
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      tickets: state.tickets,
      ticket: state.ticket,
      authenticated: state.currentUser !== null,
      users: state.users === null ? null : state.users,
      events: state.events,
      event: state.event
    };
  };
  
  export default connect(
    mapStateToProps,
    {
      getAllTickets,
      getTicket,
      addTicket,
      getCurrentUser,
      getUsers,
      getAllEvents,
      getEvent
    }
  )(TicketsList);
  </code></pre>
  
  <p>The strange thing is I can access the user's object inside of the tickets array and display the author's name, but anything related to events return undefined.</p>
  
  <p>When I add </p>
  
  <pre><code>&lt;td style={{ border: "2px solid black" }}&gt;
              {ticket.events.id}
            &lt;/td&gt;
  </code></pre>
  
  <p>Inside the map function, it does render the corresponding <code>event_id</code>.</p>