Validating Array before rendering I am rendering a list from an array of objects. I want to check the correctness of the array before rendering. For that I am using typeof and null.

In real situation the list comes from the API. 

Is it the correct way? and is there any better way to do it?



const activeEvents = [{
  id: '1',
  title: 'event 1'
}, {
  id: '2',
  title: 'event 2'
}]

function App() {
  return ( &lt;div &gt;
      &lt;h4&gt; List &lt;/h4&gt; 
      { typeof activeEvents === 'object' &amp;&amp;
      activeEvents !== null &amp;&amp;
      activeEvents.map(event =&gt; ( 
        &lt;li key = { event.id } value = { event.id } &gt; { event.title } 
        &lt;/li&gt;
       ))} 
      &lt;/div&gt;
);
}

ReactDOM.render( &lt;
  App / &gt; ,
  document.getElementById('root')
);
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;

&lt;div id="root" /&gt;
typeof activeEvents === 'object' &amp;&amp; activeEvents !== null can be true for both Array and Object :



const array = [];
const obj = {};

console.log(typeof array === 'object' &amp;&amp; array !== null)
console.log(typeof obj === 'object' &amp;&amp; obj !== null)




you can use Array.isArray



const activeEvents = [{
  id: '1',
  title: 'event 1'
}, {
  id: '2',
  title: 'event 2'
}]

function App() {
  return ( 
    &lt;div &gt;
      &lt;h4&gt; List &lt;/h4&gt; 
      { Array.isArray(activeEvents) &amp;&amp; 
        activeEvents.map(event =&gt; ( 
          &lt;li key = { event.id } value = { event.id } &gt; { event.title } &lt;/li&gt;
        ))
      } 
    &lt;/div&gt;
  );
}

ReactDOM.render( &lt;
  App / &gt; ,
  document.getElementById('root')
);
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;

&lt;div id="root" /&gt;