Having hard time understanding a piece of code #1018

ratnabh · 2024-03-21T15:51:10Z

ratnabh
Mar 21, 2024

Hi guys, fairly being new to react, I was just going through the code and I am having hard time understanding something.

The issue is that inside components/forms/DynamicForm/index.jsx, we have code which is

  const SearchComponent = () => {
    return (
      <Form.Item
        label={translate(field.label)}
        name={field.name}
        rules={[
          {
            required: field.required || false,
            type: filedType[field.type] ?? 'any',
          },
        ]}
      >
        <AutoCompleteAsync
          entity={field.entity}
          displayLabels={field.displayLabels}
          searchFields={field.searchFields}
          outputValue={field.outputValue}
          withRedirect={field.withRedirect}
          urlToRedirect={field.urlToRedirect}
          redirectLabel={field.redirectLabel}
        />
      </Form.Item>
    );
  };

now upon going to AutoCompleteAsync component I find that we are using a prop called value and onChange there, but I don't seem it to passing from the parent, and it does have some random numbers there, can anyone help me out to figure it how it the component getting value and onChange props when we don't pass it from DynamicForm, Thanks!

Answered by salahlalami

Mar 22, 2024

@ratnabh

value, ///////////////// this is for update
onChange, ////////////////// this is for update

This is needed when we create custom input behavior , required by AntD , this will be passed auto by Form.Item .

we need this just for update when we fill input when we try to update form

View full answer

Dhriti143 · 2024-03-21T18:32:17Z

Dhriti143
Mar 21, 2024

This component returns a Form.Item, which appears to be part of a larger form. This Form.Item renders an AutoCompleteAsync component inside it.
You mentioned that when you looked into the AutoCompleteAsync component, you found references to value and onChange props, but you couldn't find where these props are being passed from the parent component.
These could be the possible explanations:

Context API: The AutoCompleteAsync component might be accessing value and onChange props from a React Context, which would allow it to access these props without them being explicitly passed from the parent component.
Internal State: The AutoCompleteAsync component might have default values set for value and onChange, or it might manage its own internal state for these props. In such cases, it would initialize these values internally or provide its own mechanism to update them without relying on external props.
Prop Drilling: Although you mentioned that value and onChange are not explicitly passed from the parent SearchComponent, it's possible that they are passed from a higher-level parent component higher up in the component tree. In such cases, the props might be passed down through multiple layers of components via prop drilling.

To determine exactly how value and onChange are being handled in the AutoCompleteAsync component, you'll need to find out more about its implementation. You can check if it's using any of the above techniques to access these props.

1 reply

ratnabh Mar 21, 2024
Author

Hi @Dhriti143 , Thank you for the suggestion but as you can see in AutoCompleteAsync Component the props are destructured like

export default function AutoCompleteAsync({
  entity,
  displayLabels,
  searchFields,
  outputValue = '_id',
  redirectLabel = 'Add New',
  withRedirect = false,
  urlToRedirect = '/',
  value, ///////////////// this is for update
  onChange, ////////////////// this is for update
}) {.........

which must mean that value and onChange props are passed down from parent to child, so I dont' think its due to the above reasons mentioned, unless I am totally wrong.

inesmrad · 2024-03-22T07:41:49Z

inesmrad
Mar 22, 2024

In the AutoCompleteAsync Component, the props are effectively destructured and i have a few suggestions as explanation :

Default Props: The parent component might not be explicitly passing value and onChange props to AutoCompleteAsync, but these props could have been assigned default values within the AutoCompleteAsync component itself. If no props are passed from the parent, the default props will be used.
Dynamic Prop Assignment: It's also possible that value and onChange props are being passed automaticaly to the AutoCompleteAsync component by Form.Item

0 replies

salahlalami · 2024-03-22T07:42:57Z

salahlalami
Mar 22, 2024
Maintainer

@ratnabh

value, ///////////////// this is for update
onChange, ////////////////// this is for update

This is needed when we create custom input behavior , required by AntD , this will be passed auto by Form.Item .

we need this just for update when we fill input when we try to update form

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IDURAR AI , Inc

Having hard time understanding a piece of code #1018

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

IDURAR AI , Inc

Having hard time understanding a piece of code #1018

ratnabh Mar 21, 2024

Replies: 3 comments · 1 reply

Dhriti143 Mar 21, 2024

ratnabh Mar 21, 2024 Author

inesmrad Mar 22, 2024

salahlalami Mar 22, 2024 Maintainer

ratnabh
Mar 21, 2024

Replies: 3 comments 1 reply

Dhriti143
Mar 21, 2024

ratnabh Mar 21, 2024
Author

inesmrad
Mar 22, 2024

salahlalami
Mar 22, 2024
Maintainer