title: Map Filter in React. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
body: <pre><code>function Main(){
      // create an array that holds objects
      const people = [
          {
              firstName: 'Fathi',
              lastName: 'Noor',
              age: 27,
              colors: ['red', 'blue'],
              bodyAttributes: {
                  weight: 64,
                  height: 171
              }
          },
          {
              firstName: 'Hanafi',
              lastName: 'Noor',
              age: 26,
              colors: ['white', 'black'],
              bodyAttributes: {
                  weight: 62,
                  height: 172
              }
          }
      ]
  
      return(
          &lt;main&gt;
              &lt;div&gt;
                  /* display person age equal to 27 using filter using ES6 arrow */
                  {people.filter(person =&gt; person.age == 27)}
              &lt;/div&gt;
          &lt;/main&gt;
      )
  }
  </code></pre>
  
  <p>I'm very new to <strong>react</strong> and the use of <strong>map</strong> instead of a normal loop function. </p>
  
  <p>When I run this code it gave me this error (as displayed below)</p>
  
  <p><a href="https://i.stack.imgur.com/zn1OI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zn1OI.png" alt="map filter error"></a></p>
  
  <p>Can you guys teach me the right way of how to display <strong>all data</strong> of a person when <strong>filtered by age</strong> equal to 27?</p>