title: how to set array of data through a loop to get access in a component using react?
body: <p>I  have a Problem Like this. I have made a component and create a componentDidMount method to access some data.</p>
  
  <p>This is my component.</p>
  
  <pre><code>import React,{ Component } from 'react';
  import { Button, Form, Grid, Message,Card } from 'semantic-ui-react';
  import BodyBackgroundColor from 'react-body-backgroundcolor';
  
  import web3 from '../ethereum/web3';
  import trafficfine from '../ethereum/trafficfine';
  
  import Layout from './Layout';
  import Header from './Header';
  
  
  export default class Officerreg extends Component {
    state ={
      firstname: '',
      lastname: '',
      officer: 0,
      officers:[]
    };
  
    async componentDidMount(){
      const officerCount = await trafficfine.methods.getofficerCount().call();
      for(let i=0;i&lt;officerCount;i++){
        var officer={
          firstname:'',
          lastname:'',
          address:0
        }
  
        const officers = await trafficfine.methods.getNthOfficerName(i).call();
        officer.firstname=officers[0];
        officer.lastname=officers[1];
        officer.address=officers[2];
        this.setState({officers:officer});
      }
  
      console.log(this.state.officers);
    }
  
    onSubmit = async (event) =&gt;{
      event.preventDefault();
      this.setState({ loading: true, errorMessage: ''});
  
      try{
        const accounts = await web3.eth.getAccounts();
  
        await trafficfine.methods.addOfficer(this.state.firstname,this.state.lastname,this.state.officer)
          .send({
            from: accounts[0]
          });
  
      }catch(err){
        this.setState({ errorMessage: err.message})
      }
  
      this.setState({ loading: false});
    }
      render(){
          return(
            &lt;BodyBackgroundColor backgroundColor='#e9ebee'&gt;
            &lt;div &gt;
            &lt;Header&gt;&lt;/Header&gt;
            &lt;Layout style={{paddingTop:'100px'}}&gt;
              &lt;Grid&gt;
                &lt;Grid.Row&gt;
                &lt;Grid.Column width={10}&gt;
                  &lt;Card style={{paddingTop:'40px',paddingBottom:'40px',paddingLeft:'50px',paddingRight:'50px',width:'2000px',marginTop:'40px',boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}}&gt;
                      &lt;h2&gt;Officers&lt;/h2&gt;
                  &lt;/Card&gt;
                &lt;/Grid.Column&gt;
                &lt;Grid.Column width={6}&gt;
              &lt;Card style={{paddingTop:'40px',paddingBottom:'40px',paddingLeft:'50px',paddingRight:'50px',width:'1500px',marginTop:'40px',boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}}&gt;
             &lt;Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}&gt;
               &lt;center&gt;&lt;h3&gt;Add Officer&lt;/h3&gt;&lt;/center&gt;
                &lt;Form.Field&gt;
                  &lt;label&gt;First Name&lt;/label&gt;
                  &lt;input placeholder='Sunil'  value={this.state.firstname}
                          onChange ={event =&gt; this.setState({ firstname: event.target.value})} /&gt;
                &lt;/Form.Field&gt;
                &lt;Form.Field&gt;
                  &lt;label&gt;Last Name&lt;/label&gt;
                  &lt;input placeholder='Bandara'  value={this.state.lastname}
                          onChange ={event =&gt; this.setState({ lastname: event.target.value})}/&gt;
                &lt;/Form.Field&gt;
                &lt;Form.Field&gt;
                  &lt;label&gt;Address Of the officer&lt;/label&gt;
                  &lt;input placeholder='Car'  value={this.state.officer}
                          onChange ={event =&gt; this.setState({ officer: event.target.value})}/&gt;
                &lt;/Form.Field&gt;
                &lt;Message error header="Oops!" content={this.state.errorMessage} /&gt;
                      &lt;Button loading={this.state.loading} color="green" basic&gt;Add Officer&lt;/Button&gt; &lt;Button  loading={this.state.loading} color="red" basic &gt;Clear&lt;/Button&gt;
              &lt;/Form&gt;
              &lt;/Card&gt;
              &lt;/Grid.Column&gt;
              &lt;/Grid.Row&gt;
              &lt;/Grid&gt;
              &lt;/Layout&gt;
  
              &lt;/div&gt;
              &lt;/BodyBackgroundColor&gt;
  
          )
      }
  }
  </code></pre>
  
  <p>Through the for loop, I am accessing a set of data. I want to access all of these data. So, how can I modify my ComponentDidMount method in order to make those all data to access in the component? What I have tried is not do what I expected. It just consoles log only the last officer. What I want is to access all officers.Can someone help me to find a solution for my Problem? Thank you!!</p>