Skip to main content
se explica lo que sucedio
Origen Enlace
vicasas
  • 1.3k
  • 3
  • 21
  • 50

[ 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.

[ 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.

Origen Enlace
vicasas
  • 1.3k
  • 3
  • 21
  • 50

problemas con inputs arrays en el state

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)

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)

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)

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>
    )
  }
}