question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Controls: React text node support

See original GitHub issue

Currently React nodes, such as children, show a JSON object editor by default. They should show a text editor instead, in the short term. Long term, we should support JSX #11428

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:56
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
monolithedcommented, Oct 12, 2020

Is there any workaround for this one?

UPD:

{
    argTypes: {
        child: {
            table: {
                type: {
                    summary: 'React.ReactNode'
                }
            },
            control: {
                type: 'select',
                options: {
                    default: [ ],
                    withChild: [
                        <SomeComponent />
                    ]
                }
            }
        }
    }
}
0reactions
ghengeveldcommented, Mar 18, 2021

Because JSX isn’t serializable (by telejson), such values cannot be used as args. As of Storybook 6.2, you can use a mapping.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ReactDOM – React
render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called.
Read more >
Refs and the DOM - React
Refs provide a way to access DOM nodes or React elements created in the render method. ... Managing focus, text selection, or media...
Read more >
DOM Elements - React
The value attribute is supported by <input> , <select> and <textarea> components. You can use it to set the value of the component....
Read more >
Accessibility - React
React fully supports building accessible websites, often by using standard HTML techniques. Standards and Guidelines. WCAG. The Web Content Accessibility ...
Read more >
React Top-Level API
Create and return a new React element of the given type. The type argument can be either a tag name string (such as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found