title: Display Category names on React
body: <p>I have a product table that has the ff:</p>
  
  <ul>
  <li>id - AUTO_INCREMENT</li>
  <li>date</li>
  <li>amount</li>
  <li>description</li>
  <li>cat_id</li>
  </ul>
  
  <p>and a category table that has the ff:</p>
  
  <ul>
  <li>id - AUTO_INCREMENT</li>
  <li>name</li>
  <li>amount</li>
  </ul>
  
  <p>Now on my react app I am trying to pull up a select statement that will display the categories name to the given list of category names. by default if there is no category inserted within the product table it must return none.</p>
  
  <p>So I created a helper function: </p>
  
  <pre><code>const selectViaId = function(id){
    sequelize.query('SELECT categories.name FROM `categories` LEFT JOIN products on products.category_id = categories.id', { type: sequelize.QueryTypes.SELECT})
      .then(catnames =&gt; {
        callback(catnames);
      });
  };
  </code></pre>
  
  <p>How do I list all these category names on my select statement that uses two tables in react?</p>
  
  <p>For instance: </p>
  
  <pre><code>{ categories.map(item =&gt; {
    return &lt;div className="cat-name"&gt;{this.props.item.cat.name}&lt;/div&gt;;
  }
  </code></pre>
  
  <p>So if the category_id from the products table it must return "none" if it's not empty it must return the category name from the list inside that div that is equal to the id of the cateogories table....Sorry newbie here.</p>