title: How to display my values in props array horizontally
body: <p>In my React project I have to take an array from parent component and print it in child component(PrintHorizontal) horizontally.</p>
  
  <p>I am using map function which renders my values vertically so I wrote join to combine array values but I am getting different value. Print is my child component</p>
  
  <pre><code>props.values=[
     {
      id:1,
      x:1
     },
     {
      id:1,
      x:1
     }
   ]
  
  PrintHorizontal Component:
  const PrintHorizontal = props =&gt; {  
  let list=props.values.map(value =&gt; {      
      return &lt;Print key={value.id} data={value.x} /&gt;
   });
  return (
      &lt;div&gt;
          {list.join(' , ')}
      &lt;/div&gt;
  )
  }
  
  Print Component:
  const Print = props =&gt; {
      return (
          &lt;div&gt;
              &lt;Avatar&gt;{props.data}&lt;/Avatar&gt;  //Avatar is a component imported from materialUI
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>I expect run values would be printed horizontally instead I am getting
  [object Object],[object Object]</p>