react: Apostrophes in strings are rendered incorrectly

Describe the bug Apostrophes are rendered as ' instead of as '.

To Reproduce Steps to reproduce the behavior:

1. Go to https://storybooks-official.netlify.com/?path=/story/addons-knobs-withknobs--tweaks-static-values
2. Click on Knobs
3. Change Name from “Storyteller” to “Mc’Storyteller”
4. See error rendered on the Canvas: My name is Mc'Storyteller

Expected behavior Canvas should be rendered with My name is Mc'Storyteller

Code snippets Any string used in JSX containing an apostrophe will be rendered incorrectly.

e.g.

render() {
  const string = "I'm wrong";
  return <>{string}</>;
}

System:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.14.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 70.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: ^5.2.8 => 5.2.8 
    @storybook/addon-knobs: ^5.2.8 => 5.2.8 
    @storybook/react: ^5.2.8 => 5.2.8 

Additional context

Apostrophes in JSX text nodes will render correctly (from what I’ve seen so far):

render() {
  return <>I'm right</>;
}

So this issue might only apply to strings that are used within JSX elements (and not to JSX text nodes directly).

[stale[bot]]

Hi everyone! Seems like there hasn’t been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don’t have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@cellog we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls documentation
• Migration instructions

PRs on addon-knobs still welcomed