title: Discordance between component state and its props
body: <p>I am making a basic drag and drop utility where you can drag and recombine the position of three cards in React.</p>
  <p>I dont know why but there seems to be discordance between the actual data on the parents state and its child. After some refactoring following users input, things are as this:</p>
  <pre><code>  onDrop = (event) =&gt; {
  
      event.preventDefault();
      event.stopPropagation();
      const newData = this.props.getDraggedCard(); //gets the data actually being dragged around
     let  receiverCard = Object.assign({}, this.state) //backup of the previous state
  
      this.setState({
          _id: newData._id,
          text: newData.text,
          title: newData.title,
          subtitle: newData.subtitle,
          image: newData.image
      }, () =&gt; { this.props.onDropParentData(receiverCard) })
  
  
  }
  </code></pre>
  <p>this function is on every child component, which are the items actually to be moved around.</p>
  <p>The parent component, which stores and saves the data:</p>
  <pre><code>onDropParentData = (receiverCard) =&gt; {
  
  let {slideInformation}=this.state;  //the state where all the data is
  let draggedCard = this.state.draggedCard; //the data being dragged
  
  const indexDragged= slideInformation.findIndex((element)=&gt;element.id===draggedCard.id)
  
  const indexReceiver= slideInformation.findIndex((element)=&gt;element.id===receiverCard.id)
  
  let draggedCardIdStorage = this.state.draggedCard.id;
  
  draggedCard.id = receiverCard.id;
  receiverCard.id = draggedCardIdStorage;
  
  slideInformation.splice(indexDragged,1,draggedCard);
  slideInformation.splice(indexReceiver,1,receiverCard);
  
  this.setState({slideInformation});
  </code></pre>
  <p>}</p>
  <p>with this actual code, the state holds the correct information but when dragging and dropping, items dont switch between positions as desired, only the dropped item gets its new position.</p>
  <p>The render method on the parent is:</p>
  <pre><code>  {this.state.slideInformation.map((slide,index) =&gt; {
  
              return (
                &lt;CardFormBody
  
                  getDraggedCard={this.getDraggedCard}
                  key={index}
                  onDropParentData={this.onDropParentData}
                  onDrag={this.onDrag}
                  slide={slide}
                  onDragOver={this.onDragOver}
  
                  setFormData={this.setFormData}
  
                /&gt;
              )
            })}
  </code></pre>
  <p>And every CardFormBody is</p>
  <pre><code>  &lt;div draggable onDrag={(event) =&gt; { this.props.onDrag(event, this.state) }} className=&quot;newsCard&quot; name={this.state.id}&gt;
              &lt;label&gt;Título&lt;/label&gt;
              &lt;input name={this.state.id} onChange={this.handleTitleChange} value={this.props.slide.title} /&gt;
              &lt;label&gt;Subtítulo&lt;/label&gt;
              &lt;input name={this.state.id} onChange={this.handleSubtitleChange} value={this.state.subtitle} /&gt;
              &lt;label&gt;Texto&lt;/label&gt;
              &lt;textarea onDragOver={this.props.onDragOver} onDrop={this.onDrop} name={this.state.id} onChange={this.handleTextChange} value={this.state.text} /&gt;
              &lt;button type=&quot;button&quot; name={this.state.id} onClick={this.handleImgChange}&gt;Añadir Imagen&lt;/button&gt;
              &lt;div className=&quot;imageWrapperForm&quot;&gt;
                  &lt;img alt=&quot;preview&quot; name={this.state.id} className=&quot;previewImg&quot; src={this.state.image} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>