Return statement leads to: Expected an assignment or function call and instead saw an expression no-unused-expressions

Question

I sometimes still have a hard time understanding when or when not to use a return statement. I recently ran into an issue in my ReactJS code. Basically I get html from a fetch call then set it as the innerHTML of an element. I need to change that data a bit after setting it.

When it doesn't work:

  useEffect(()=>{
    setHeaderFooter(props.data.header,props.data.footer, changeLinks)
  }, [props.data.header,props.data.footer])

  const changeLinks = ()=>{
    $(document).find('nav.navbar a[href*="/oc"]').each(function (index, element) {
      var original = $(element).attr('href');
      var final = process.env.REACT_APP_PLATFORM_URL + original;
      $(element).attr('href', final);
  });
  
  // Adds the first letter of the users name as the icon in header.
      $('#firstLetter').text()
      $('#firstLetterLink').text().charAt(0).toUpperCase()
  }

export const setHeaderFooter=(head,foot, callback) =>{
    let header = document.querySelector('#header')
    let footer = document.querySelector('#footer')
    header.innerHTML = head, footer.innerHTML = foot
   return callback()
}

When it works (Without the modification phase at the end):

  useEffect(()=>{
    setHeaderFooter(props.data.header,props.data.footer)
  }, [props.data.header,props.data.footer])

  const changeLinks = ()=>{
    $(document).find('nav.navbar a[href*="/oc"]').each(function (index, element) {
      var original = $(element).attr('href');
      var final = process.env.REACT_APP_PLATFORM_URL + original;
      $(element).attr('href', final);
  });
  
  // Adds the first letter of the users name as the icon in header.
      $('#firstLetter').text()
      $('#firstLetterLink').text().charAt(0).toUpperCase()
  }

export const setHeaderFooter=(head,foot) =>{
    let header = document.querySelector('#header')
    let footer = document.querySelector('#footer')
    return header.innerHTML = head, footer.innerHTML = foot
}

Can someone give me an explanation as to what is happening here. I want to understand the return statement better.

Answer 1

Problem is the comma used in-between header and footer assignment:

Change this:

header.innerHTML = head, footer.innerHTML = foot
return callback()

To this:

header.innerHTML = head;
footer.innerHTML = foot;
return callback();

To explain the issue see the MDN docs :

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand

In your case, the footer.innerHTML = foot is the last operand and will be returned but since you're not assigning the returned value to anything, it goes wasted and hence the lint error you get. You can read more about the lint error at Disallow Unused Expressions (no-unused-expressions)