title: React js loop through array received from blade
body: <p>Im using React js for the front-end in a Laravel project. From a controller , im passing an array to my view:</p>
  
  <pre><code>return view('shopCart')-&gt;with('items',$it);
  </code></pre>
  
  <p>Now in the view a could loop through the array like this:</p>
  
  <pre><code>@foreach($items as $item)
                  &lt;li&gt;&lt;input type="checkbox" name=""&gt; &lt;span&gt;{{$item-&gt;Name}}&lt;/span&gt; &lt;span&gt;&lt;/span&gt;  &lt;span&gt;{{$item-&gt;Cost}}&lt;/span&gt; &lt;/li&gt;
  @endforeach
  </code></pre>
  
  <p>And this is working fine. But i would like to make the view more dynamic(by the way this is a list of products in a shopping cart). For example , by default all the checkboxes will be checked, meaning the user is buying all items. I want that if the user uncheck a box, the total price changes . So i made a React component , and im passing the $items array to that component via props:</p>
  
  <pre><code>&lt;div id="listshops" datas={{$items}}&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And there's the component:</p>
  
  <pre><code>class Items extends Component {
      render() {
  
  
          return (
              &lt;div className="container"&gt;
                 &lt;a href="/products"&gt;Continue shopping&lt;/a&gt;
                 //LOOP THROUGH THE ARRAY OF PRODUCTS
              &lt;/div&gt;
          );
      }
  }
  
  export default Items;
  
  
  window.onload=function(){
  if (document.getElementById('listshops')) {
      var data=document.getElementById('listshops').getAttribute("datas");
      ReactDOM.render(&lt;Items items={data}/&gt;, document.getElementById('listshops'));
  }
  
  }
  </code></pre>
  
  <p>How can i loop through that array i passed to the component so i can display the product like in the @foreach in blade ? </p>