title: React: "Error t.filter is not a function" or "Error: Uncaught TypeError: t.find is not a function" --> Trying to update object in array
body: <p>React newbie is messing things up, sorry, but really tried for hours ;( see attempts below.</p>
  
  <p>Simple task: Trying to update an object in an array of objects.</p>
  
  <p>This should be fairly easy though after research of a dozen answers, trying a bunch of possible solutions I still get errors. I can't figure out  what I am missing here.</p>
  
  <p>Here are my 4 attempts:</p>
  
  <p><strong>Attempt 1</strong></p>
  
  <pre><code>updateText = (updatedText) =&gt; {
  
    var arrTexts = {...this.state.arrTexts}
  
    var myObjectToUpdate = arrTexts.filter(x =&gt; x.id === updatedText.id);
    myObjectToUpdate = updatedText;
  
    console.log (myObjectToUpdate);
    console.log (arrTexts);
  };
  </code></pre>
  
  <p><strong>Attempt 2:</strong></p>
  
  <pre><code>updateText = (updatedText) =&gt; {
  
    var arrTexts = {...this.state.arrTexts}
  
    var myObjectToUpdate = arrTexts.find(function (myObjectToUpdate) { return myObjectToUpdate.id === updatedText.id; });
    myObjectToUpdate = updatedText
  
    console.log (myObjectToUpdate);
    console.log (arrTexts);
  };
  </code></pre>
  
  <p><strong>Attempt 3</strong></p>
  
  <pre><code>updateText = (updatedText) =&gt; {
  
    var arrTexts = {...this.state.arrTexts}
  
    var myObjectToUpdate = arrTexts.findIndex(x =&gt; x.id === updatedText.id);
    myObjectToUpdate = updatedText;
  
    console.log (myObjectToUpdate);
    console.log (arrTexts);
  };
  </code></pre>
  
  <p><strong>Attempt 4</strong></p>
  
  <pre><code>updateText = (updatedText) =&gt; {
  
    var arrTexts = {...this.state.arrTexts}
  
    var myObjectToUpdate = _.findWhere(arrTexts, { id: updatedText.id });
    myObjectToUpdate = updatedText;
  
  console.log (myObjectToUpdate);
  console.log (arrTexts);
  };
  </code></pre>
  
  <p>The "updateText" comes from another component that includes an form and handles onSubmit this function:</p>
  
  <pre><code>handleUpdate = event =&gt; {
    event.preventDefault();
    const updatedText = {
      ...this.props.arrText,
      id: this.idRef.current.value,
      title: this.titleRef.current.value,
      author: this.authorRef.current.value,
    };
    this.props.updateText(updatedText);
  };
  </code></pre>
  
  <p>Thanks so much for helping out!</p>