Dot notation for React components

Question

Let's say I have FieldUpdate and FieldUpdate.Radio component:

src > components > fieldUpdate > index.tsx, radio.tsx

// index.tsx
import React from 'React';
import Radio from './radio';

const FieldUpdate = (props) => (
  .
  .
  .
);

FieldUpdate.Radio = Radio;
export default FieldUpdate;

If I want to use the FieldUpdate component in Radio component, is it possible? I haven't really go through it yet but when I tried, there was no cyclic import warning. Is it not a best practice? What should I do if I need the FieldUpdate inside Radio?

Answer 1

It is working in this example, but I dont think it is Clean Coding

import React from "react";

const App = () => {
  return (
    <div>
      <Radio />
    </div>
  );
};

export default App;

const Radio = (props) => (
  <div>
    This is Radio
    <FieldUpdate />
  </div>
);

const FieldUpdate = (props) => <div>This is FieldUpdate</div>;

FieldUpdate.Radio = Radio;