در یک کامپوننت می توانیم هر چندتا که بخواهیم state تعریف کنیم ولی این state ها فقط در داخل خود کامپوننت قابل فراخوانی هستند.  state ها می توانند عدد رشته و حتی آرایه باشند.

در مثال زیر یک state تعریف کرده و مقدار آن را یک آرایه قرار داده ایم:

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

TableRow بصورت داینامیک هر آیتم از data را بر می گرداند و خط زیر

 {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}

یک تابع می باشد که هر بار یکی از آیتم های data را در فیلد person قرار می دهد.