I have a file with several components responsible for making a tab component with corresponding text. My components are TabScan, TabMessage, TabCode, Tabs, Wrapper.
The first three receive different props. The Tabs component conditionally renders them.
I specify propTypes and defaultProps for them at the bottom of my file.
TabScan.propTypes = {
qrCode: PropTypes.string,
downloadLink: PropTypes.string
}
TabScan.defaultProps = {
qrCode: '/images/SAMPLE.png',
downloadLink: '#'
}
TabMessage.propTypes = {
iconTop: PropTypes.string,
iconLeft: PropTypes.string,
iconMiddle: PropTypes.string,
iconRight: PropTypes.string
}
TabMessage.defaultProps = {
iconTop: 'fa fa-envelope-o',
iconLeft: 'fab fa-twitter',
iconMiddle: 'fab fa-facebook-f',
iconRight: 'fab fa-google'
}
TabCode.propTypes = {
invitationCode: PropTypes.string
}
TabCode.defaultProps = {
invitationCode: '123456789'
}
Then I export the wrapper component export const Wrapper= () => <Tabs items={tabTitles} />
I add my Wrapper component to tab.stories.js file,
import React from 'react'
import Wrapper from '../client/components/mobile/tab'
export default { title: 'Tab Switcher' }
export const wrapper = () => <Wrapper />
but it doesn't render any data coming through props and says that props are not defined; however, everything works fine on the localhost. What can be done?