Tengo una matriz de datos existente en un archivo separado que estoy agregando con la entrada del usuario. La entrada de usuario que estoy tomando es 3 películas favoritas. Puedo recibir y enviar el resto de los datos a un archivo existente. No estoy seguro de si la matriz de estado me está desconcertando, pero no puedo agregar 3 cadenas a la matriz.
Mi estado es el siguiente:
this.state = { isActive: false, id: 25, name: { first: "", last: "" }, city: "", country: "", employer: "", title: "", favoriteMovies: ['', '', ''] };Estoy configurando el estado para la entrada del usuario de la siguiente manera:
handleFavoriteMoviesChange = (e) => { this.setState({ favoriteMovies: [...this.state.favoriteMovies, e.target.value]}) };Estos son mis 3 campos de entrada:
<input placeholder="favorite movies" value={this.state.favoriteMovies[0]} onChange={this.handleFavoriteMoviesChange} /> <input placeholder="favorite movies" value={this.state.favoriteMovies[1]} onChange={this.handleFavoriteMoviesChange} /> <input placeholder="favorite movies" value={this.state.favoriteMovies[2]} onChange={this.handleFavoriteMoviesChange} />Si desea establecer el valor de las películas favoriteMovies en su índice particular, puede establecer el estado de la siguiente manera: setState DEMO
handleFavoriteMoviesChange = (e, index) => { this.setState({ favoriteMovies: this.state.favoriteMovies.map((movie, i) => { if (i === index) return e.target.value; return movie; }) }); }; y llame a handleFavoriteMoviesChange como:
<input placeholder="favorite movies" value={this.state.favoriteMovies[0]} onChange={(e) => this.handleFavoriteMoviesChange(e, 0)} /> <input placeholder="favorite movies" value={this.state.favoriteMovies[1]} onChange={(e) => this.handleFavoriteMoviesChange(e, 1)} /> <input placeholder="favorite movies" value={this.state.favoriteMovies[2]} onChange={(e) => this.handleFavoriteMoviesChange(e, 2)} />