React 代码中的 ESLint no-return-assign 和 no-param-reassign 错误

Question

I have this code in React App to load my chat messages:

  const chatBubbles = dummyData.map((obj, i = 0) => {
    <div className={`${classes.bubbleContainer} ${obj.direction}`} key={i}>
      <div key={(i += 1)} className={classes.bubble}>
        <div className={classes.button}>{obj.message}</div>
      </div>
    </div>;
  });
  return <div className={classes.container}>{chatBubbles}</div>;

This is working, but I'm getting two errors in ESLint and I don't know how to fix it

  error  Expected to return a value in arrow function                           array-callback-return
  error  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  error  Assignment to function parameter 'i'                                   no-param-reassign

How can I rewrite this code snippet so that my Eslint will accept?

Answer 1

First issue: No reason to set a default value!

const chatBubbles = dummyData.map((obj, i = 0) => { <-- there should not be a `= 0`

Second issue: No return inside the block

const chatBubbles = dummyData.map((obj, i = 0) => { <-- there { should be a ( <div/> ) or { return (<div/>) }

Third issue: Incrementing index which is set by map

(i += 1) <-- Why are you increasing the variable i? 

---

const chatBubbles = dummyData.map((obj, i) => (
  <div className={`${classes.bubbleContainer} ${obj.direction}`} key={i}>
    <div key={(i + 1)} className={classes.bubble}>
      <div className={classes.button}>{obj.message}</div>
    </div>
  </div>;
));
return <div className={classes.container}>{chatBubbles}</div>;

I am not sure why you are adding one to the second key...

Answer 2

You don't need to pre-assign i when using the map() function on arrays. Replace the first line with this:

  const chatBubbles = dummyData.map((obj, i) => {

Answer 3

Maybe try to make it like this:

    const chatBubbles = dummyData.map((obj, i) => {
    return (
        <div className={`${classes.bubbleContainer} ${obj.direction}`} key={i}>
            <div key={(i + 1)} className={classes.bubble}>
                <div className={classes.button}>{obj.message}</div>
            </div>
        </div>;
    )
});
return <div className={classes.container}>{chatBubbles}</div>;

error Expected an assignment or function call and instead saw an expression and error Expected to return a value in arrow function - you need to return something from map callback

error Assignment to function parameter 'i' - you should not reassign i ( i += 1 change to i + 1 )