Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react: Apostrophes in strings are rendered incorrectly #9589

Closed
mfulton26 opened this issue Jan 21, 2020 · 6 comments
Closed

react: Apostrophes in strings are rendered incorrectly #9589

mfulton26 opened this issue Jan 21, 2020 · 6 comments

Comments

@mfulton26
Copy link

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).

@mfulton26 mfulton26 changed the title JSX: Apostrophes in strings are rendered incorrectly react: Apostrophes in strings are rendered incorrectly Jan 21, 2020
@stale
Copy link

stale bot commented Feb 12, 2020

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!

@stale stale bot added the inactive label Feb 12, 2020
@joey80
Copy link

joey80 commented Mar 11, 2020

I'm experiencing this issue with Vue as well

@stale stale bot removed the inactive label Mar 11, 2020
@stale
Copy link

stale bot commented Apr 1, 2020

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!

@stale stale bot added the inactive label Apr 1, 2020
@stale
Copy link

stale bot commented May 1, 2020

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

@stale stale bot closed this as completed May 1, 2020
@cellog
Copy link

cellog commented Sep 21, 2020

This is still happening, is there any reason it's been ignored or just inertia?

@shilman
Copy link
Member

shilman commented Sep 22, 2020

@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.

PRs on addon-knobs still welcomed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants