React admin get unique data from db for selectInput

Question

I want to get unique data from db in the drop-down menu as i have two drop-down menus and both are depended on each other for example if i select something in one drop-down then it will show so data related to that in the other drop-down. `

<FormDataConsumer>

  {({ formData, dispatch, ...rest }) => (

    <Fragment>

      <ReferenceInput basePath={props.basePath} validate={requiredValidator} source="cc_documents_section_id" reference="documents-section" label="Document Type">
       <SelectInput optionText="cc_document_type" {...rest} />
     </ReferenceInput>

     <ReferenceInput source="cc_documents_section_id" reference="documents-section" validate={requiredValidator} label="Document Name">
        <SelectInput optionText="cc_document_name"
                            onChange={value => dispatch(
                            change(REDUX_FORM_NAME,'cc_document_type', null)
                                )}{...rest}
                         />
          </ReferenceInput>

       </Fragment>
      )}
</FormDataConsumer>`

In db there are fields like this

{ doctype: "A", docname: "X", id: 1 },
{ doctype: "A", docname: "Y", id: 2 },
{ doctype: "B", docname: "Z", id: 3 }

in first drop-down i want to show unique data from doctype and in second it will show docname accordingly

Richard · Accepted Answer · 2019-05-07 08:07:35Z

1

We used a custom Input Component for that purpose:

interface UniqueSelectInputProps {
  choices?: [];
  source?: string;
}

const UniqueSelectInput = (props: UniqueSelectInputProps) => {
  const { choices, source } = props;

  let choices_unique: Array<{ name: String; id: String }> = [];
  if (choices && source) {
    const choices_unique_list = choices
      .map(item => item[source])
      .filter((value, index, self) => self.indexOf(value) === index);
    choices_unique = choices_unique_list.map(item => {
      return { name: item, id: item };
    });
  }
  return (
    <>
      <SelectInput choices={choices_unique} source={source} />
    </>
  );
};

answered May 7, 2019 at 8:07

Richard

5523 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React admin get unique data from db for selectInput

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related