title: REACT/REDUX Two problems with editing item and key after add item
body: <p>I have two problems. I will try to explain it as much as I can.</p>
  
  <ol>
  <li><p>I added item editing features to my code, unfortunately when I accept changes my item doesn't change. The add (almost), remove option works as it should. The update option, however, does not send a request.</p></li>
  <li><p>The second problem is that after a slight change of code to add the function of editing the element, my code for adding the element broke a bit. After completing the form and sending it, the element is added, BUT is added without an ID code and I get the error: <code>Warning: Each child in a list should have a unique "key" prop.</code> After refreshing the page, the problem disappears, the previously added item already has an ID and is displayed correctly.</p></li>
  </ol>
  
  <p>PROBLEM NUMBER 1</p>
  
  <p>TaskDetail.js component </p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import { getTask, updateTask } from "../../actions/tasks";
  import { Redirect } from "react-router-dom";
  
  class TaskDetail extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        title: "",
        description: "",
        date: "",
        hours: null,
      };
    }
  
    componentDidMount() {
      this.props.getTask(this.props.match.params.id);
      setTimeout(() =&gt; this.update(), 50);
    }
  
    update = () =&gt; {
      console.log("STATE UPDATE");
      const { title, description, date, hours } = this.props.task[0];
      this.setState({
        title: title,
        description: description,
        date: date,
        hours: hours,
      });
    };
  
    onChange = (e) =&gt; {
      this.setState({
        [e.target.name]: e.target.value,
      });
    };
  
    onSubmit = (e) =&gt; {
      console.log("UPDATE REQUEST");
      const task = {
        title: this.state.title,
        description: this.state.description,
        date: this.state.date,
        hours: this.state.hour,
      };
      this.props.updateTask(this.props.task.id, task);
    };
  
    render() {
      const { title, description, date, hours } = this.state;
      return (
        &lt;div className="card mt-5"&gt;
          &lt;div className="card-header"&gt;
            &lt;span&gt;ID: {this.props.match.params.id}&lt;/span&gt;
          &lt;/div&gt;
          &lt;form
            className="card-body"
            onSubmit={this.props.updateTask.bind(
              this.props.match.params.id,
              this.state
            )}
          &gt;
            &lt;div className="form-group"&gt;
              &lt;label&gt;Title&lt;/label&gt;
              &lt;input
                type="text"
                className="form-control"
                name="title"
                onChange={this.onChange}
                value={title || ""}
              /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;label&gt;Description&lt;/label&gt;
              &lt;textarea
                type="text"
                className="form-control"
                name="description"
                onChange={this.onChange}
                value={description || ""}
              /&gt;
            &lt;/div&gt;
            &lt;div className="date-hours-form"&gt;
              &lt;div className="form-group"&gt;
                &lt;label&gt;Date&lt;/label&gt;
                &lt;input
                  type="date"
                  className="form-control"
                  name="date"
                  onChange={this.onChange}
                  value={date || ""}
                /&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;label&gt;Hours&lt;/label&gt;
                &lt;input
                  type="number"
                  className="form-control"
                  name="hours"
                  onChange={this.onChange}
                  value={hours || ""}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;button type="submit" className="btn btn-block btn-suc"&gt;
                EDIT TASK
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; ({
    task: state.tasks.task,
    isLoading: state.tasks.isLoading,
  });
  
  export default connect(mapStateToProps, { getTask, updateTask })(TaskDetail);
  </code></pre>
  
  <p>tasksAction.js </p>
  
  <pre><code>// UPDATE TASK
  export const updateTask = (id, task) =&gt; (dispatch) =&gt; {
    console.log(`ID: ${id} TASK: ${task}`);
    axios
      .put(`/api/tasks/${id}/`, task)
      .then((response) =&gt; {
        dispatch({
          type: UPDATE_TASK,
          payload: task,
        });
      })
      .catch((err) =&gt; console.log(err.response));
  };
  </code></pre>
  
  <p>tasksReducser.js </p>
  
  <pre><code>import {
    GET_TASKS,
    DELETE_TASK,
    CREATE_TASK,
    GET_TASK_REQUEST,
    GET_TASK_SUCCESS,
    UPDATE_TASK,
  } from "../actions/types.js";
  
  const initialState = {
    tasks: [],
    task: {},
    isLoading: false,
  };
  
  export default function (state = initialState, action) {
    switch (action.type) {
      case GET_TASKS:
        return {
          ...state,
          tasks: action.payload,
        };
      case DELETE_TASK:
        return {
          ...state,
          tasks: state.tasks.filter((task) =&gt; task.id !== action.payload),
        };
      case CREATE_TASK:
        return {
          ...state,
          tasks: [...state.tasks, action.payload],
        };
      case GET_TASK_REQUEST:
        console.log("TASK GET PENDING");
        return {
          ...state,
          isLoading: action.payload.loading,
        };
      case GET_TASK_SUCCESS:
        console.log("TASK GET SUCCESS");
        return {
          ...state,
          task: state.tasks.filter((task) =&gt; task.id === action.payload.data.id),
          isLoading: action.payload.loading,
        };
      case UPDATE_TASK:
        console.log("TASK UPDATED");
        return {
          ...state,
          task: {},
        };
      default:
        return state;
    }
  }
  
  </code></pre>
  
  <p>PROBLEM NUMBER 2</p>
  
  <p>TasksList.js </p>
  
  <pre><code>import React, { Component, Fragment } from "react";
  import { connect } from "react-redux";
  import { getTasks, deleteTask, getTask } from "../../actions/tasks";
  import PropTypes from "prop-types";
  import { Link } from "react-router-dom";
  
  export class Tasks extends Component {
    static propTypes = {
      tasks: PropTypes.array.isRequired,
      getTasks: PropTypes.func.isRequired,
      deleteTask: PropTypes.func.isRequired,
    };
  
    render() {
      return (
        &lt;div className="card card-tasks card-body mt-3"&gt;
          &lt;table className="table table-striped"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th scope="col"&gt;ID&lt;/th&gt;
                &lt;th scope="col"&gt;Title&lt;/th&gt;
                &lt;th scope="col"&gt;Date&lt;/th&gt;
                &lt;th scope="col"&gt;Hours&lt;/th&gt;
                &lt;th scope="col"&gt;&lt;/th&gt;
                &lt;th scope="col"&gt;&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {this.props.tasks.map((task) =&gt; (
                &lt;Fragment key={task.id}&gt;
                  &lt;tr&gt;
                    &lt;th&gt;{task.id}&lt;/th&gt;
                    &lt;td&gt;{task.title}&lt;/td&gt;
                    &lt;td&gt;{task.date}&lt;/td&gt;
                    &lt;td&gt;{task.hours}&lt;/td&gt;
                    &lt;td&gt;
                      &lt;Link
                        to={{
                          pathname: `/edit/${task.id}`,
                          state: { id: task.id },
                        }}
                        className="btn btn-primary"
                      &gt;
                        DETAIL
                      &lt;/Link&gt;
                    &lt;/td&gt;
                    &lt;td&gt;
                      &lt;button
                        onClick={this.props.deleteTask.bind(this, task.id)}
                        className="btn btn-danger"
                      &gt;
                        DELETE
                      &lt;/button&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/Fragment&gt;
              ))}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; ({
    tasks: state.tasks.tasks,
  });
  
  export default connect(mapStateToProps, { getTasks, deleteTask, getTask })(
    Tasks
  );
  
  </code></pre>