I have a simple todo application in which my redux store contains an "todos" array. The Todo component displays all the todo in the store and displays the TodoForm component, which uses v6 reduction forms.
As it is now, each "todo" has the same form name / key, so every time I enter something in the "title" field, it changes the "title" of each todo. I found work using unique field names, but I am afraid that this will complicate the situation as the application grows and prefers to use unique form names so that each field can have the same name without interfering with other forms.
(TodoForm1, TodoForm2, TodoForm3 can have a unique "title" field instead of TodoForm containing the "title1", "title2", "title3" fields).
I tried to access TodoForm details so that I could set each form key as a unique identifier for the component, but it does not look like the component gets the details as before.
I also tried to make an immediately called function, where it splashes out a random number, and using this number as the form name, but that also didn't work.
How can I match all my todos and visualize the v6 reduction form using a unique shape key?
This depicts the application, console and devtools reduction. There are 3 'todos', but there is only one form that connects them all, todo-926, although each form key must be arbitrarily generated in the immediately called function:
HomePageMainSection.index.js
renderTodos(todo) { if (!todo) { return <div>No Todos</div>; } return ( <div key={todo.get('id')}> <Todo todo={todo} updateTodo={this.props.updateTodo} deleteTodo={this.props.deleteTodo} /> </div> ); } render() { if (!this.props.todos) { return <div>No Todos</div>; } return ( <div className={styles.homePageMainSection}> <h1>Hey I'm the Main Section</h1> <div> {this.props.todos.get('todos').map(this.renderTodos)} </div> </div> ); }
Todo.index.js:
renderTodo() { if (this.state.editMode) { return ( <TodoForm todo={this.props.todo} changeTodoEditMode={this.changeTodoEditMode} updateTodo={this.props.updateTodo} /> ); } return ( <div className={styles.Todo} onClick={this.changeTodoEditMode}> <div className="card card-block"> <h4 className="card-title">{this.props.todo.get('author')}</h4> <p className="card-text">{this.props.todo.get('title')}</p> <i className={`${styles.deleteIcon} btn btn-danger fa fa-times`} onClick={this.deleteTodo} ></i> </div> </div> ); } render() { return ( <div className="col-xs-6 col-sm-4"> {this.renderTodo()} </div> ); }
TodoForm.index.js:
class TodoForm extends React.Component { // eslint-disable-line react/prefer-stateless-function constructor(props) { super(props); this._handleSubmit = this._handleSubmit.bind(this); } _handleSubmit(formData) { console.log(''); console.log('OG: ', this.props.todo) console.log('formData: ', formData); const data = this.props.todo.update('title', formData.get('title')); console.log('data: ', data); console.log(''); // this.props.updateTodo(data); } render() { const { handleSubmit, pristine, submitting } = this.props; return ( <form className={`${styles.todoForm} card`} onSubmit={handleSubmit(this._handleSubmit)}> <div className="card-block"> <label htmlFor="title">{this.props.todo.get('title')}</label> <div className={'form-group'}> <Field name={`title`} component="input" type="text" placeholder="Enter new title" className="form-control" /> </div> </div> <div className="card-block btn-group" role="group"> <button className="btn btn-success" type="submit" disabled={pristine || submitting} > Submit </button> <button className="btn btn-danger fa fa-times" onClick={this.props.changeTodoEditMode} > </button> </div> </form> ); } } const randomNum = (() => { const thing = Math.floor(Math.random() * 1000) + 1; console.log('thing: ', thing); console.log('notThing: ', TodoForm.props); return thing; })(); export default reduxForm({ form: `todo-${randomNum}`, })(TodoForm);