External component with consts interfaces in react

Question

Hay, I want to create reuseable compoenent in React like for example DialogBox.

It has required fields like type, message and title.

Type can be one of 'yesNo' string or 'ok' and it defines how much buttons should be shown (yes & no, ok). Message and title are simple text that are displayed inside of dialog box.

Simple view of this: IMG

And I created DialogBox component that I can use like:

<DialogBox type={'yesNo'} message={'Message'} title={'Title'} />

But I want to use predefined const like that:

<DialogBox type={DialogBox.TYPE.YES_NO} message={'Message'} title={'Title'} />

With simple one import DialogBox:

import Dialogbox from './DialogBox.js'

To achieve DialogBox.TYPE.YES_NO

In my component DialogBox I created static object TYPE with predefined elements:

...
static TYPE = {
   YES_NO: 'yesNo',
   OK: 'ok'
}
...

And everything was beautiful to the time when I wanted to use that statics to check props in child component:

ButtonArea.propTypes = {
    type: PropTypes.oneOf(Object.values(DialogBox.TYPE))
};

And I got a circular dependencies error and my DialogBox.TYPE inside of props definition is undefined. That is how I can see it:

In DailogBox.js :

import ButtonArea from './BA';

export default class DialogBox extends Component {
 static TYPE = {
  YES_NO: 'yesNo',
  OK: 'ok'
 }

 render() {
  <ButtonArea type={this.props.type} />
 }

}

In ButtonArea.js:

import DialogBox from './DB';

export default class ButtonArea extends Component {...}

ButtonArea.propTypes = {
    type: PropTypes.oneOf(Object.values(DialogBox.TYPE))
};

And on checking propTypes DialogBox is an undefined cause of circular dependencies.

The question is. Is there a way to create component to use it like component and which has inside const object definitions and avoid circular dependencies. Like :

<Test type={Test.TYPE.SUPER_TEST}/>

I don't want to import Test and TestConst and use it like that:

<Test type={TestConst.TYPE.SUPER_TEST}/>

Praveen Kumar Praveen Kumar · Accepted Answer · 2018-05-01T10:36:43

You need to update the propsType for button , you need to check for the KEYS instead of VALUES, like below

ButtonArea.propTypes = {
    type: PropTypes.oneOf(Object.keys(DialogBox.TYPE))
};

External component with consts interfaces in react

1 Answers