title: how can i make a for loop in reactjs
body: <p>this code works whenever I change the number on index I know I need to use a loop but I don't know how I tried using <code>for (int index = 0; index &gt; i.length ; index++)</code>{ but it wasn't working I'm very sorry for asking I just really don't know how</p>
  
  <pre><code>constructor() {
  
      super();
        this.state = { jsonReturnedValue: [] ,
        name: '',
        address: ''
        }
  
      }
  
  renderItem(d, i) {
    let index = 0;
      debugger
      index++;
      let name = d.Employee_Name;
      let address = d.Address;
        //  for (int index = 0 ; index &gt; i.length ; index++){
  
      return &lt;tr key={i} &gt;
  
    &lt;td&gt; {d.Employee_ID} &lt;/td&gt;
          &lt;td&gt;{d.Employee_Name}&lt;/td&gt;
          &lt;td&gt;{d.Address }&lt;/td&gt; 
          &lt;td&gt;&lt;center&gt;&lt;button className ="btn btn-info" onClick={() =&gt; this.props.onClick(i) }   data-toggle="modal" data-target="#UpdateEmployee"&gt;Edit&lt;/button&gt;&lt;/center&gt;&lt;/td&gt;
    &lt;td&gt;&lt;center&gt;&lt;button className ="btn btn-danger"&gt;Delete&lt;/button&gt;&lt;/center&gt;&lt;/td&gt;
  
  &lt;div className="modal fade" id="UpdateEmployee" role="dialog"&gt;
           &lt;div className="modal-dialog"&gt;
             &lt;div className="modal-content"&gt;
                &lt;div className="modal-header"&gt;
                   &lt;button type="button" className="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 className="modal-title"&gt;Update Employee&lt;/h4&gt;
                &lt;/div&gt;
            &lt;div className="container"&gt;
              &lt;div className="modal-body"&gt;
                  &lt;table&gt; 
                  &lt;tbody&gt;
                  &lt;tr&gt;
                  &lt;td&gt;Name&lt;/td&gt;
                  &lt;td&gt; &lt;input type="text"value={this.state.jsonReturnedValue[index].Employee_Name} /&gt; &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                  &lt;td&gt;Address&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value={this.state.jsonReturnedValue[index].Address} /&gt;  &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="modal-footer"&gt;
                &lt;botton className="btn btn-info"&gt; Update Employee&lt;/botton&gt;
                &lt;button type="button" className="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
   &lt;/tr&gt;
  }
  </code></pre>
  
  <p>this is where i call the table ...</p>
  
  <pre><code>componentDidMount() {
    fetch('http://localhost:5118/api/employeedetails/getemployeedetails')
    .then((response) =&gt; {
      return response.json()})
    .then((json) =&gt; {
      this.setState({jsonReturnedValue : json});
    });
  }
  
  
  render() {
  
  
    let {jsonReturnedValue} = this.state;
      return(
  
          &lt;div&gt;
      &lt;div className="container"&gt;
          &lt;h1&gt; Listof Employees &lt;/h1&gt;
        &lt;button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"&gt; Add an Employee&lt;/button&gt;
          &lt;table className= "table table-bordered"&gt;
  
              &lt;tbody&gt;
               &lt;tr&gt;
                    &lt;th&gt;ID&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Address&lt;/th&gt;
                    &lt;th&gt;Update&lt;/th&gt;
                    &lt;th&gt;Delete&lt;/th&gt;
               &lt;/tr&gt;
                  {jsonReturnedValue.map((d,i) =&gt; this.renderItem(d,i))}
              &lt;/tbody&gt;
          &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I have a problem it only reads the first row item, i dont know why it does that.. how can i use foreach loop for this... or any kind of code so it will work because it doesn't read any other row besides the first one im so confused because I haven't done reactjs before</p>
  
  <p>PS: the data came from an api from asp.net... <a href="https://i.stack.imgur.com/WjOt4.png" rel="nofollow noreferrer">you can check the image here</a></p>