Can't comment out React code with vim-commentary

[shiroyasha]

I mostly use commenting to disable parts of the code that are not yet passing the tests, and then slowly uncomment the parts as they are implemented.

However, when I hit gc inside of a React code block, it comments it out with regular // javascript comments. This is not correct React comments.

function Example(props) {
  const value = "some value";

  return <div>
    <ul>
      <li>Hello</li>
    </ul>
  </div>
}

function Example(props) {
  const value = "some value";

  return <div>
    // <ul>                           <--- this comment style is breaking react code
    //  <li>Hello</li>
    // </ul>
  </div>
}

Ideally, Neovim would know that I'm in that context, and use {/* */} comments.

function Example(props) {
  const value = "some value";

  return <div>
    {/* <ul> */}
    {/*   <li>Hello</li>  */} 
    {/* </ul>  */}
  </div>
}

My solution so far is to either:

1. Delete the code and then return it back with undo
2. Move the code outside of the function, comment out, when the tests are done, return it and uncomment