me pueden dar luz con el siguiente problema que tengo en react... Resulta que tengo mi componente `SendMail` el cual es mapeado n veces como n sea el numero de filas que me devuelva mi responde de mi componente `ListMonitoring`.

Mi componente `SendMail` se genera n veces por ende debería tener un estado tipo...

```
state = {
  inputs: [...]
}
```

En donde dentro de `inputs[]` debería tener muchos estados, uno por cada iteracion de mi componente, pero no logro llegar a eso. Tal vez lo hago mal. Seria de mucha ayuda que alguien me indicara la forma correcta de lograr esto.

Dejo el código de mis componentes a continuación.

COMPONENTE 1 (ListMonitoring)

```react
export default class ListMonitoring extends Component {
  state = {
    monitoring: [],
  }

  componentDidMount () {
    
    // acá hago mi llamada a la api para almacenar el response en mi estado

    this.setState({ monitoring: jsonStr.data })
    
  }

  render () {
    return (
      <Fragment>
        {
          [this.state.monitoring].map((monitor, index) => <RowMonitoring key={index} {...monitor} />)
        }
      </Fragment>
    )
  }
}
```

COMPONENTE 2 (RowMonitoring)

```react
const RowMonitoring = (props) => {
  const { attributes: { morphoAccess, lastDate, count } } = props

  return (
    <Fragment>
      <tr>
        <td><FontAwesomeIcon icon={faArrowCircleDown} size='2x' className='red-text' /></td>
        <td>{morphoAccess}</td>
        <td>{new Date(lastDate).toLocaleString()}</td>
        <td>{count}</td>
        <td>
          <SendMail sede={morphoAccess} lastDate={lastDate} />
        </td>
      </tr>
    </Fragment>
  )
}
```

COMPONENTE 3 (SendMail)

```react
export default class SendMail extends Component {
  state = {
    isLoading: false,
    inputs: [],
  }

   handleSendMail = () => {

     // enviar email

   }

  handleSubmitSendMail = (event) => {
    event.preventDefault()
    console.log('submit')
  }

  handleChange = (event, index) => {
    this.setState({
      inputs: {
        ...this.state.inputs[index],
        [event.target.name]: event.target.value,
      }
    })
  }

  render () {
    const { sede } = this.props
    const sedeLowerCase = sede.toLowerCase()

    console.log(this.props)

    return (
      <form onSubmit={this.handleSubmitSendMail}>
        <div className="row u-m-0">
          <div className="input-field col s6 u-m-0">
            <input
              name={`input_${sedeLowerCase}${this.props.index}`}
              type="text"
              onChange={(event) => this.handleChange(event, this.props.index)}
            />
            <label htmlFor={`input_${sedeLowerCase}`}>Email</label>
          </div>
          <div className="input-field col s6 u-m-0">
            <button type='submit' className='waves-effect waves-light btn' onClick={this.handleSendMail} disabled={this.state.isLoading}>
              {
                !this.state.isLoading
                  ? 'Enviar Email'
                  : 'Enviando...'
              }
            </button>
          </div>
        </div>
      </form>
    )
  }
}
```




[ **SOLUCIONADO** ]

Finalmente cada componente `Form` en este caso el componente de nombre `SendMail` guardaba su propio estado independiente. Por ende por cada instancia de este componente tenia su propio estado.