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