Need help refactoring code to resolve eslint no-cycle warning

Question

the two issue is there are two components and a widget that all depend on each other.

I've been trying to figure out how to refactor the code to remove this warning, however when I try to switch out the components I get prop warnings about not being able to render the component:

Cannot create Form element because property inputs is missing in props [1] but
exists in Props [2].

index.js This is the form's main component.

export type Props = {
  action?: string,
  inputs: any[],
  noFormTag?: boolean, // Can't have nested forms i.e. quick create
  noFormTagSubmit?: Function,
  noFormTagRef?: any,
};


  displayQuickCreate = (input: QuickCreateProps) => {
    const {
      id, name, label, placeholder, checkboxes, formProps,
    } = input;
    if (!checkboxes || !name || !label) return null;
    return (
      <div key={id}>
        <QuickCreate
          id={id}
          name={name}
          label={label}
          placeholder={placeholder}
          checkboxes={checkboxes}
          formProps={formProps}
        />
      </div>
    );
  };

DynamicForm requires these props and index.js

export type Props = {
  nameValue?: string,
  formProps: any,
  onCreate: Function,
};


<Form
        inputs={formProps.inputs}
        noFormTag={formProps.noFormTag}
        noFormTagSubmit={this.onSubmit}
        noFormTagRef={(element) => {
          this.myRef = element;
        }}

Then finally:

QuickCreate is a widget

export type Props = {
  checkboxes: Checkbox[],
  placeholder?: string,
  name: string,
  id: string,
  label: string,
  formProps: any,
};

<DynamicForm
        nameValue={nameValue}
        formProps={formProps}
        onCreate={this.onCreate}
      />

You can't replace Form with DynamicForm on QuickCreate Because DynamicForm has axios and is sending out the information to the internet.

So my next step has been to try and get Form to work in QuickCreate but even though I'm reviewing the props there are still prop errors.

  axios.post(formProps.action, this.getParams()).then((response: any) => {
      const { onCreate } = this.props;
      if (onCreate) {
        onCreate(response);
      }
    });

My next step is to try and get QuickCreate imported directly into DynamicForm

Since QuickCreate is calling DynamicForm it should work going forward since it works in reverse?

Right now QuickCreate requires in DynamicForm

Thanks for any help!

Answer 1

the following passed:
npm lint
npm test
npm test:circleci

I switched the component under index.js form to be a checkbox:

displayQuickCreate = (input: any) => {
    const {
      id, name, label, placeholder, checkboxes, formProps,
    } = input;
    if (!checkboxes || !name || !label) return null;
    return (
      <div key={id}>
        <Checkbox
          id={id}
          name={name}
          label={label}
          placeholder={placeholder}
          checkboxes={checkboxes}
          formProps={formProps}
        />
      </div>
    );
  };