title: I try to get props to update a field but it not works (React)
body: <p>I am trying to bring the props of my component, however when I open the edit modal it only brings the data of my first object. I want to bring them to EditForm so that I can update a field, but without the id and other data I can't do it.</p>
  <p>When I click on the edit button it brings me the data correctly, it prints it in the console, it prints the data that corresponds to each user, but when passing it through props it only takes the data of the first user. When I open my Edit modal it pastes the data of the first user only, and not those of each user that the button corresponds</p>
  <pre><code>EditForm.js:
  
  import React, { Component } from 'react'
  
  export class PatchForm extends Component {
  
      constructor(props){
          super(props)
          this.state = {
              id: props.id,
              name: props.name,
              lastName: props.lastName,
              age: props.age,
              email: props.email,
              salary: props.salary,
              company: props.company,
              image: props.image
          }
      }
  
  
      changeHandler = e =&gt; {
          this.setState({[e.target.name]: e.target.value})
      }
  
  
      render(){
          const { name, lastName, age, email, salary, company, image} = this.state
          return(
              &lt;div className=&quot;modal fade&quot; id=&quot;editModal&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
                  &lt;div className=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
                      &lt;div className=&quot;modal-content&quot;&gt;
                          &lt;div className=&quot;modal-header&quot;&gt;
                              &lt;h5 className=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;New message&lt;/h5&gt;
                              &lt;button type=&quot;button&quot; className=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                              &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;modal-body&quot;&gt;
                              &lt;form&gt;
                              &lt;div className=&quot;form-group&quot;&gt;
                                      &lt;label className=&quot;col-form-label&quot;&gt;Name:&lt;/label&gt;
                                      &lt;input type=&quot;text&quot; className=&quot;form-control&quot; name=&quot;name&quot; value={name} onChange={this.changeHandler}&gt;&lt;/input&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;form-group&quot;&gt;
                                      &lt;label className=&quot;col-form-label&quot;&gt;Last name:&lt;/label&gt;
                                      &lt;input type=&quot;text&quot; className=&quot;form-control&quot; name=&quot;lastName&quot; value={lastName} onChange={this.changeHandler}&gt;&lt;/input&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;form-group&quot;&gt;
                                      &lt;label className=&quot;col-form-label&quot;&gt;Age:&lt;/label&gt;
                                      &lt;input type=&quot;number&quot; className=&quot;form-control&quot; name=&quot;age&quot; value={age} onChange={this.changeHandler}&gt;&lt;/input&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;form-group&quot;&gt;
                                      &lt;label className=&quot;col-form-label&quot;&gt;Email:&lt;/label&gt;
                                      &lt;input type=&quot;email&quot; className=&quot;form-control&quot; name=&quot;email&quot; value={email} onChange={this.changeHandler}&gt;&lt;/input&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;form-group&quot;&gt;
                                      &lt;label className=&quot;col-form-label&quot;&gt;Salary (MXNgit):&lt;/label&gt;
                                      &lt;input type=&quot;number&quot; className=&quot;form-control&quot; name=&quot;salary&quot; value={salary} onChange={this.changeHandler}&gt;&lt;/input&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;form-group&quot;&gt;
                                      &lt;label className=&quot;col-form-label&quot;&gt;Company:&lt;/label&gt;
                                      &lt;input type=&quot;text&quot; readOnly className=&quot;form-control&quot; name=&quot;company&quot; placeholder={company} onChange={this.changeHandler}&gt;&lt;/input&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;form-group&quot;&gt;
                                      &lt;label className=&quot;col-form-label&quot;&gt;URL img:&lt;/label&gt;
                                      &lt;input type=&quot;text&quot; className=&quot;form-control&quot; name=&quot;company&quot; value={image} onChange={this.changeHandler}&gt;&lt;/input&gt;
                                  &lt;/div&gt;
                                  {/* &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt; */}
                                  &lt;div className=&quot;modal-footer&quot;&gt;
                                      &lt;button type=&quot;button&quot; className=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
                                      &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary&quot; id=&quot;submitButton&quot; onClick={() =&gt; {
                                          window.location.reload()
                                      }}&gt;Save changes&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  
  }
  
  export default PatchForm
  </code></pre>
  <p>Table.jsx:</p>
  <pre><code>import React from 'react'
  import PostForm from './PostForm'
  import EditForm from './EditForm'
  
  
  const EmployeesTable = () =&gt; {
  
      // Estados
      const [employee, setEmployee] = React.useState([])
      const [currency, setCurrency] = React.useState(true)
  
      // Ejecutamos la función en solo una ocasión con useEffect
      React.useEffect( () =&gt; {
          obtenerDatos()
      }, [])
  
      // Obtenemos los datos de los empleados
      const obtenerDatos = async () =&gt; {
          const data = await fetch('http://localhost:8080')
          const employeesObject = await data.json()
          const {employees} = employeesObject.data
          setEmployee(employees)
      }
  
      // Formato de moneda
      let formatter = new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'MXN',
      });
  
      let formatterUSD = new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD',
      });
  
      return (
          &lt;div&gt;
              &lt;div className=&quot;col-12 text-center&quot;&gt;
                  &lt;div className=&quot;col-12 col-lg-6 offset-lg-3&quot;&gt;
                      {/* Condicional para cambiar entre false and true */}
                      &lt;button className=&quot;btn m-2 btn-outline-success&quot; onClick={() =&gt; setCurrency(!currency)}&gt;Change Currency&lt;/button&gt;
                      &lt;button type=&quot;button&quot; className=&quot; m-2 btn btn-outline-success&quot; data-toggle=&quot;modal&quot; data-target=&quot;#createModal&quot;&gt;Create Employee&lt;/button&gt;
                  &lt;/div&gt;
                  
                  &lt;table className=&quot;table table-dark text-center col-12 col-lg-6 offset-lg-3&quot;&gt;
                      &lt;thead className=&quot;thead-dark&quot;&gt;
                          &lt;tr&gt;
                              &lt;th scope=&quot;col&quot;&gt;Total employees&lt;/th&gt;
                              &lt;th scope=&quot;col&quot;&gt;Currency&lt;/th&gt;
  
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;th scope=&quot;row&quot;&gt;{employee.length}&lt;/th&gt;
                              &lt;th&gt;{ currency ? &quot;MXN&quot; : &quot;USD&quot; }&lt;/th&gt;
                          &lt;/tr&gt;
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
  
              {/* Form para creación de empleados */}
              &lt;PostForm /&gt;
  
              &lt;div className=&quot;table-wrapper-scroll-y my-custom-scrollbar&quot;&gt;
                  &lt;table className=&quot;table table-hover table-striped col-12&quot;&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;#&lt;/th&gt;
                              &lt;th&gt;Avatar&lt;/th&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                              &lt;th&gt;Last name&lt;/th&gt;
                              &lt;th&gt;Age&lt;/th&gt;
                              &lt;th&gt;Email&lt;/th&gt;
                              &lt;th&gt;Salary {currency ? 'MXN' : 'USD'}&lt;/th&gt;
                              &lt;th&gt;Company&lt;/th&gt;
                              &lt;th&gt;Actions&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody className=&quot;col-6&quot;&gt;
                      {
                          // Iteramos para obtener los datos de cada empleado e imprimirlos en el DOM
                          employee.map((item, index) =&gt; {
                              return (
                                  &lt;tr key={item._id}&gt;
                                      &lt;th&gt;{index + 1}&lt;/th&gt;
                                      &lt;td&gt;
                                          &lt;img className=&quot;img-size&quot; src={item.image} alt=&quot;img&quot;/&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;{item.name}&lt;/td&gt;
                                      &lt;td&gt;{item.lastName}&lt;/td&gt;
                                      &lt;td&gt;{item.age}&lt;/td&gt;
                                      &lt;td&gt;{item.email}&lt;/td&gt;
                                      {/* Condicional para cambiar clase de color */}
                                      &lt;td className={ item.salary &gt; 10000 ? &quot;green text-right&quot; : &quot;red text-right&quot;} &gt;{ currency ? formatter.format(item.salary) : formatterUSD.format(item.salary * 21.5)}&lt;/td&gt;
                                      &lt;td &gt;{item.company}&lt;/td&gt;
  
                                      &lt;td&gt;
                                          &lt;EditForm 
                                              id={item._id}
                                              name={item.name}
                                              lastName={item.lastName}
                                              age={item.age}
                                              email={item.email}
                                              salary={item.salary}
                                              company={item.company}
                                              image={item.image}
                                          /&gt;
                                          &lt;i className=&quot;fas fa-edit cursor-pointer&quot; data-toggle=&quot;modal&quot; data-target=&quot;#editModal&quot; onClick={()=&gt; {console.log(item._id)}}&gt;&lt;/i&gt;
                                      &lt;/td&gt;
                                      
                                  &lt;/tr&gt;
                              )
                          })
                      }
                      &lt;/tbody&gt;
                      
                  &lt;/table&gt;
              &lt;/div&gt;
  
              
  
              
          &lt;/div&gt;
      )
          
  }
  
  export default EmployeesTable;
  </code></pre>