My problem :

I need to modify existing data to access a value in an object using a variable key but the key remains undefined

My code:
position is a radio input. The position value is stored using a react hook form

in my main component, I call ‘position’ with watch to reuse it.

I then have a reusable form which must use this ‘position’ parameters

in this form, I have a table which must use data from an API

the data received (articles) is an array of objects
the object looks like this

{
"id": "b56",
"app_id": "SC-STD-10",
"name": "test - Standard - 10 hours",
"service_hours": 10,
"price": {
"first_sell_price": 2280,
"second_sell_price": 2260,
"third_sell_price": 2220
}
},

My generator page, where i get articles.

//here all my import


export const Generator = () => {
  const dispatch = useDispatch();
  const methods = useForm();

  const step = useSelector((state) => state.step.actual);
  const positions = useSelector((state) => state.positions?.positions);
  const articles = useSelector((state) => state.articles?.articles);

  const category = methods.watch('category');
  const service = methods.watch('service');
  **const position = methods.watch('position');**
  const customer = methods.watch('customer');

  const mergeFormConfigurations = (baseConfig, additionalConfig) => {
    return { ...baseConfig, ...additionalConfig };
  };

  const getFormConfiguration = () => {
    let combinedConfigurations = formConfiguration(
      category,
      positions
    );
    if (service?.name === 'Refill support contract') {
      combinedConfigurations = mergeFormConfigurations(
        combinedConfigurations,
        **refillSupportContractFormConfiguration(articles, position)**
      );
    }
    return combinedConfigurations;
  };

  const currentFormConfiguration = **getFormConfiguration**();

  const FormWrapper = ({ step, methods }) => {
    const configuration = currentFormConfiguration[step];
    if (!configuration) {
      return null;
    }

    const onSubmit = (data) => {
      postOffer(data);
    };

    return (
      <Box
        sx={{
          width: '80vw',
          margin: '0 5em',
        }}
      >
        <form onSubmit={methods.handleSubmit(onSubmit)}>
          <NewOffer />
          <Save />

          <FormComponent
            title={configuration.title}
            InputFields={configuration.InputFields}
          />
        </form>
      </Box>
    );
  };

  useEffect(() => {
    dispatch(setLocation('generator'));
     dispatch(getPositions());
  }, []);



  return (
    <Box>
      <FormProvider {...methods}>
        <StepsBar />
        <FormWrapper step={step} methods={methods} />
      </FormProvider>
    </Box>
  );
};

in order to use its data in my form, I must modify the data received to add ‘category’ to them and add a price according to the selected position

here, the position log gives me the selected position (THIRD)

However, when I try to access finalPrice with the priceKey which uses position, I get undefined

On the other hand, if I decide to access it by passing the key directly (article.price[‘third_sell_price’])

it works.

Why?

Is this a problem because of the asynchronous?

export const refillSupportContractFormConfiguration = (articles, position) => {
  console.log(position, 'position');
  const updatedArticles = articles.map((article) => {
    const priceKey = Object.keys(article?.price).find((key) => {
      console.log(position?.toLowerCase());
      return key.includes(position?.toLowerCase());
    });

    const finalPrice = article.price[priceKey];
    console.log(finalPrice);
    return {
      ...article,
      quantity: 0,
      finalPrice: finalPrice,
    };
  });
  return {
    'Test': {
      title: 'Test title',
      InputFields: [
        {
          inputType: 'array',
          inputTitle: 'Change the quantity of articles you want',
          rows: updatedArticles,
          columns: [
            {
              field: 'name',
              headerName: 'Package',
              flex: 1,
            },
            {
              field: 'quantity',
              headerName: 'Quantité',
              type: 'number',
              editable: true,
              flex: 1,
            },
            {
              field: 'finalPrice',
              headerName: 'Final price',
              type: 'number',
              width: 120,
              valueGetter: (params) =>
                params.row.quantity * params.row.finalPrice,
              flex: 1,
            },
          ],
          register: 'test',
        },
      ],
    },
  };
};