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.

Addon-docs: React forwardRef breaks Props block

See original GitHub issue

Ref: https://github.com/storybookjs/storybook/pull/4961

To Reproduce component:

import React from 'react'
import { string } from 'prop-types'

const Title = React.forwardRef((props, ref) => (
  return <div ref={ref}>{prop.text}</div>
))

Title.propTypes = { 
  text: string.isRequired
}

export default Title

story:

import React from 'react'
import Title from './Title'

export default {
	title: 'Example|Title',
	parameters: {
		component: Title
	}
}

export const newUser = () => <Title text="Ted Doe"  />

Expected behavior The props table should show props.text is of type string

Screenshots

System: System: OS: macOS 10.14.6 CPU: (8) x64 Intel® Core™ i7-6820HQ CPU @ 2.70GHz Binaries: Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.11.2 - ~/.nvm/versions/node/v12.6.0/bin/npm Browsers: Chrome: 76.0.3809.132 Firefox: 68.0.2 Safari: 12.1.2 npmPackages: @storybook/addon-a11y: ^5.2.0-rc.0 => 5.2.0-rc.0 @storybook/addon-actions: ^5.2.0-rc.0 => 5.2.0-rc.0 @storybook/addon-docs: ^5.2.0-rc.0 => 5.2.0-rc.0 @storybook/addon-knobs: ^5.2.0-rc.0 => 5.2.0-rc.0 @storybook/addon-storysource: ^5.2.0-rc.0 => 5.2.0-rc.0 @storybook/addons: ^5.2.0-rc.0 => 5.2.0-rc.0 @storybook/react: ^5.2.0-rc.0 => 5.2.0-rc.0 @storybook/source-loader: ^5.2.0-rc.0 => 5.2.0-rc.0

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

shilmancommented, Oct 19, 2019

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.23 containing PR #8445 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there’s still more to do.

1reaction

darmawanalbertcommented, Oct 16, 2019

@shilman I’m trying to fix this issue 🙇

Top Results From Across the Web

react-to-print - npm

Start using react-to-print in your project by running `npm i ... forwardRef((props, ref) => { return ( <div ref={ref}>My cool content here!

Hooks API Reference - React

This page describes the APIs for the built-in Hooks in React. ... If you pass an empty array ( [] ), the props...

react-addons-clone-with-props | Yarn - Package Manager

React will render the retry attempt concurrently, and without blocking the browser. Layout Effects with Suspense: When a tree re-suspends and reverts to...

Advanced Usage - styled-components

This component provides a theme to all React components underneath itself via the context ... Define our button, but with the use of...

UseRef, CreateRef, ForwardRef? What's up with refs in React?

If you have the react-hooks/exhaustive-deps eslint plugin, it will even tell ... stick to useRef and forwardRef for functional components.