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.

Props that differ from their defaults not rendered when showDefaultProps option is false

See original GitHub issue

First, thanks for creating such a great utility! Now, onto the issue I’ve run into:

Taking a component used in the tests:

class DefaultPropsComponent extends React.Component {}

DefaultPropsComponent.defaultProps = {test: 'test'};

The following case correctly omits the prop from the JSX string:

reactElementToJSXString(<DefaultPropsComponent />, {showDefaultProps: false})
// <DefaultPropsComponent />

But if you change the prop’s value from the default, it doesn’t get rendered:

reactElementToJSXString(<DefaultPropsComponent test="foo" />, {showDefaultProps: false})
// <DefaultPropsComponent />

I would expect the result to be

// <DefaultPropsComponent test="foo" />

I’m just about to submit a pull request with a test and a fix.

Issue Analytics

State:
Created 7 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

vvocommented, Jul 12, 2016

Well this seems good and fits the documentation. Thanks a lot.

0reactions

vvocommented, Jul 12, 2016

No big deal, all fixed now!

Top Results From Across the Web

Storybook templates do not handle default prop values ...

Debugging it, i discovered that using the template, the props is being initialized with "Option.none()" instead of the actual evaluated Option.

react-element-to-jsx-string - npm.io

If true, default props shown. If false, default props are omitted unless they differ from from the default value. options.showFunctions: boolean, default false....

react-element-to-jsx-string | Yarn - Package Manager

Turn a ReactElement into the corresponding JSX string. Useful for unit testing and any other need you may think of. Features:.

Default props values in Storybook are not correct

However, there are no issues in a React project. For example, if I have a Button component: import React from "react"; ...

A complete guide to React default props - LogRocket Blog

In this article, we'll cover setting default props for React components. The ... If the prop is not specified when a component is...