Setting nested array inside object in ReactJS

Question

I have a Post like application, where a user can add comments with emojis to the post, which I have a method for:

addEmoji = (newEmoji) =>{
// mark if new emoji is already in the array or not
let containsNewEmoji = false;

let authors = []
authors.push(this.props.comment.author.name)
console.log(this.props.comment.author.name)
console.log(authors)
// recreate emojis array
let newEmojis = this.state.emojis.map(emoji => {

  // if emoji already there, simply increment count
  if (emoji.id === newEmoji.id) {
    containsNewEmoji = true;
    return { 
      ...newEmoji,
      ...emoji,
      count: emoji.count + 1,
      authors: [...authors, authors]
    };
  }

  // otherwise return a copy of previous emoji
  return {
    ...emoji
  };
});

console.log(authors)
// if newEmoji was not in the array previously, add it freshly
if (!containsNewEmoji) {
  newEmojis = [...newEmojis, {...newEmoji, count: 1, authors: [...authors, authors]}];
}

// set new state
this.setState({ emojis: newEmojis, 
showEmoji: true});
}

As shown in the method comments to the code, each emoji-only displays once, otherwise, a count variable will increment, to be shown below each comment.

I would like to add the feature, to save an array of the given username of the person, who added the emoji.

the username is given in as a prop

this.props.comment.author.name

so I have tried making an array to add the names 7

let authors = []
authors.push(this.props.comment.author.name)

the issue is that it's being overwritten each time a new emoji instance is being passed, I tried saving it to the object

   return { 
  ...newEmoji,
  ...emoji,
  count: emoji.count + 1,
  authors: [...authors, authors] // i want to save the old copy of authors and pass the new name
};


newEmojis = [...newEmojis, {...newEmoji, count: 1, authors: [...authors, authors]}]; // and then set the object in the end

As of now, the array is being overwritten each time, but could I set the parameter inside the object?

Agney · Accepted Answer · 2018-12-08 14:49:16Z

2

This is coming from setting the author field to an empty array early on in the code,

let authors = []

Instead it has to be set to the authors earlier on, as in:

authors: [..emoji.authors, author];

You should also consider using function of setState when dealing with setState.

addEmoji = (newEmoji) => {
  const author = this.props.comment.author.name;
  this.setState(({ emojis: prevEmojis }) => {
    let containsNewEmoji = true;
    const newEmojis = prevEmojis.map((emoji)=>{
      if(newEmoji.id === emoji.id) {
        containsNewEmoji = false;
        return {
          ...emoji,
          count: emoji.count + 1,
          authors: [..emoji.authors, author];
        }
      } else {
        return {
          ...emoji,
        }
      }
    });
    if(containsNewEmojis) {
      newEmojis.push({
        ...newEmoji,
        count: 1,
        authors: [author],
      });
    }
    return {
      emojis: newEmojis,
    }
  });
}

I have reversed the containsNewEmoji variable so that it fits the context.

answered Dec 8, 2018 at 14:49

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kristoffer Tølbøll Over a year ago

Very nice answer, well structured, I did choose the other, cause it fit a bit more with my architecture but +1 for very nice effort!

Brett DeWoody · Accepted Answer · 2018-12-08 14:44:35Z

Yes, in the addEmoji method you're currently recreating the authors array each time addEmoji is called. Instead of defining a new authors array, push the new author into the existing authors property of the emoji.

Without knowing how the emoji object is initially created I can't give a definitive answer, but hopefully the following is a start. The solution assumes the emoji object has an authors property of type array.

addEmoji = (newEmoji) => {
  // mark if new emoji is already in the array or not
  let containsNewEmoji = false;


  // recreate emojis array
  let newEmojis = this.state.emojis.map(emoji => {

    // if emoji already there, simply increment count
    if (emoji.id === newEmoji.id) {
      containsNewEmoji = true;
      return { 
        ...emoji,
        count: emoji.count + 1,
        authors: [...emoji.authors, this.props.comment.author.name]
      };
    }

    // otherwise return a copy of the previous emoji
    return emoji;
  });
};

Collectives™ on Stack Overflow

Setting nested array inside object in ReactJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related