React newbie is messing things up, sorry, but really tried for hours ;( see attempts below.

Simple task: Trying to update an object in an array of objects.

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.

Here are my 4 attempts:

Attempt 1

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = arrTexts.filter(x => x.id === updatedText.id);
  myObjectToUpdate = updatedText;

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

Attempt 2:

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = arrTexts.find(function (myObjectToUpdate) { return myObjectToUpdate.id === updatedText.id; });
  myObjectToUpdate = updatedText

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

Attempt 3

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = arrTexts.findIndex(x => x.id === updatedText.id);
  myObjectToUpdate = updatedText;

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

Attempt 4

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = _.findWhere(arrTexts, { id: updatedText.id });
  myObjectToUpdate = updatedText;

console.log (myObjectToUpdate);
console.log (arrTexts);
};

The "updateText" es from another ponent that includes an form and handles onSubmit this function:

handleUpdate = event => {
  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);
};

Thanks so much for helping out!

React newbie is messing things up, sorry, but really tried for hours ;( see attempts below.

Simple task: Trying to update an object in an array of objects.

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.

Here are my 4 attempts:

Attempt 1

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = arrTexts.filter(x => x.id === updatedText.id);
  myObjectToUpdate = updatedText;

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

Attempt 2:

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = arrTexts.find(function (myObjectToUpdate) { return myObjectToUpdate.id === updatedText.id; });
  myObjectToUpdate = updatedText

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

Attempt 3

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = arrTexts.findIndex(x => x.id === updatedText.id);
  myObjectToUpdate = updatedText;

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

Attempt 4

updateText = (updatedText) => {

  var arrTexts = {...this.state.arrTexts}

  var myObjectToUpdate = _.findWhere(arrTexts, { id: updatedText.id });
  myObjectToUpdate = updatedText;

console.log (myObjectToUpdate);
console.log (arrTexts);
};

The "updateText" es from another ponent that includes an form and handles onSubmit this function:

handleUpdate = event => {
  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);
};

Thanks so much for helping out!

• javascript
• reactjs
• object
• filter
• find

2 Answers 2

filter, find and findIndex are all functions applicable on array. You data seems to be an array, but are cloning it to an object. You would clone it like var arrTexts = [...this.state.arrTexts]

updateText = (updatedText) => {

  var arrTexts = [...this.state.arrTexts]

  var myObjectToUpdate = arrTexts.find(function (myObjectToUpdate) { return myObjectToUpdate.id === updatedText.id; });
  myObjectToUpdate = updatedText

  console.log (myObjectToUpdate);
  console.log (arrTexts);
};

Also you would update it like

handleUpdate = event => {
  event.preventDefault();
  const updatedText = {
    id: this.idRef.current.value,
    title: this.titleRef.current.value,
    author: this.authorRef.current.value,
  };
  this.props.updateText(updatedText);
};

Okay so like 4 solutions:

It could just be the data hasn't loaded before the filter or find function is called. So a few troubleshooting things that I always try are:

1. Just use try{} catch{} around your statement block to avoid this error. Try Catch makes it so the page doesn't crash, and the data a lot of times, just loads a second later. This is how you know you're skilled at JavaScript.

2. Use conditional rendering and don't attempt method until condition is true. For example: if(data != null || undefined){ "run filter function crashing"}

Also really important, don't forget if you're below the return part and have to do it in JSX then just do conditional JSX instead of an if statement, like {data != null ? data : null}

3. Use Async Await. Make the method not run until it awaits the data. and make the task run concurrently. Let the Synchronous code reader keep running the code below until the method needing data, finally has the data it needs to run.

4. Okay so this is not remended. But just for your sanity, incase the 3 things I've said before are still not working. Don't forget that you can always just define the initial array object yourself. Let's say you want to map a blank array object [{}]. Just define the object towards the top, and you can even make it look like an initial loading thing, if you do like const object = [{id: "...", email: "..."}]. Something must map in this case, and the wanted data could load later.