Make 'Review' belong to 'Product' in Microdata

Question

I have the following HTML which has the Product schema as well as the Review schema, but for some reason, my Product & Review are separate on the Structured Data Testing tool with the following warning on my Product schema:

The review field is recommended. Please provide a value if available.`

Is this normal?

<main class="container" itemscope="" itemtype="http://schema.org/Product">
  <meta itemprop="brand" content="Ticketstoday">

  <div class="section position-relative">

    <div class="row">
      <div class="col s12 l8">
        <div class="card-panel white description">
          <h1 itemprop="name"></h1>
          <h6 class="grey-text text-darken-1"></h6>
          <span itemprop="description">
          </span>
        </div>
      </div>
    </div>

  <div class="row">
    <div class="col s12 l8">
      <div class="card-panel white description">
        <h2>Reviews</h2>
        <div itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">
          <h6 class="grey-text text-darken-1">
            Rated <span itemprop="ratingValue">4.3</span> out of <span itemprop="bestRating">5</span> (<span itemprop="ratingCount">55</span> Reviews)
          </h6>
        </div>
        <ul class="collection reviews">
           <li class="collection-item avatar" itemscope="" itemtype="http://schema.org/Review">
                    <meta itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
                    <meta itemprop="url" content="http://ticketstoday.local/play/all-about-eve">
                    <span itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating">
                      <meta itemprop="ratingValue" content="5">
                    </span>
                    <span itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
                        <meta itemprop="name" content="Ticketstoday">
                    </span>

                    <img id="review-avatar" src="http://ticketstoday.local//images/avatar.svg" alt="" class="circle">
                    <div itemprop="author" itemscope="" itemtype="https://schema.org/Person">
                      <span class="title" itemprop="name">Ms. A Gunn</span>
                    </div>
                    <span class="grey-text text-darken-1">Feb 3, 2019</span>
                    <div>
                      <span class="stars" data-rating="5" data-num-stars="5"><i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star</i><i class="material-icons">star</i></span>
                    </div>
                    <p itemprop="reviewBody">Test Review</p>
                </li>

        </ul>
      </div>
    </div>
  </div>

  </div>
</main>

Answer 1

The element:

<li class="collection-item avatar" itemscope="" itemtype="http://schema.org/Review">

is missing the itemprop attribute, it should be

<li class="collection-item avatar" itemprop="review" itemscope="" itemtype="http://schema.org/Review">

in this case.