How can I change the value of a property on the call of a reusable component on Reactjs?

Question

I have a modal with a form where I am attempting to render a component which could be use anywhere with different output.

For example:

This is the component:

import { Select, SelectItem } from 'carbon-components-react';
import React from 'react';
import { translate } from 'react-i18next';
import PropTypes from 'prop-types';
import { uniqBy } from 'lodash';
import GetShipmentsAddresses from './containers/GetShipmentsAddresses';

const AddressesSelect = ({ t, handleAddresses, value }) => (
  <GetShipmentsAddresses>
    {({ data }) => {
      const unique = uniqBy(data, 'originationAddress.description');
      const renderAddresses = unique.map(addresses => (
        <SelectItem
          value={addresses.originationAddress.description}
          key={addresses.id}
          text={addresses.originationAddress.description}
        />
      ));
      return (
        <Select
          id="select-3"
          defaultValue="Shipped From"
          labelText={t('shipments.shippedFrom')}
          onChange={handleAddresses}
        >
          <SelectItem
            disabled
            hidden
            value=""
            text={t('shipments.selectLocation')}
          />
          <SelectItem value="" text={t('shipments.allLocations')} />
          {renderAddresses}
        </Select>
      );
    }}
  </GetShipmentsAddresses>
);

AddressesSelect.propTypes = {
  t: PropTypes.func.isRequired,
  handleAddresses: PropTypes.func.isRequired,
};

export default translate()(AddressesSelect);

And I need to call that on a parent component like this:

const ParentComp = ({ VALUE }) => (

          <AddressesSelect
            handleAddresses={this.handleChange('shippedFrom')}
            VALUE="originationAddress" // this is would be VALUE
            title={t('shipments.shippedFrom')}
          />

          <br />

          <AddressesSelect
            handleAddresses={this.handleChange('shippedTo')}
            VALUE="destinationAddress" // this is would be VALUE
            title={t('shipments.shippedFrom')}
          />

)

So, the only thing that is going to change from call to the other is that instead of saying addresses.originationAddress.description it has to say addresses.destinationAddress.description

The only word changing is going to be originationAddress to destinationAddress .

So let's say I will like to do something like this:

const AddressesSelect = ({ t, handleAddresses, VALUE }) => (
  <GetShipmentsAddresses>
    {({ data }) => {
      const unique = uniqBy(data, 'VALUE.description');
      const renderAddresses = unique.map(addresses => (
        <SelectItem
          value={addresses.VALUE.description}
          key={addresses.id}
          text={addresses.VALUE.description}
        />
      ));
      return (
        <Select
          id="select-3"
          defaultValue="Shipped From"
          labelText={t('shipments.shippedFrom')}
          onChange={handleAddresses}
        >
          <SelectItem
            disabled
            hidden
            value=""
            text={t('shipments.selectLocation')}
          />
          <SelectItem value="" text={t('shipments.allLocations')} />
          {renderAddresses}
        </Select>
      );
    }}
  </GetShipmentsAddresses>
);

Where VALUE could be change in the call of the component to destinationAddress or originationAddress .

How can I achieve that?

Answer 1

Use template strings

   const ParentComp = ({ value }) => (
          <AddressesSelect
            handleAddresses={this.handleChange('shippedFrom')}
            VALUE={`${value}Address`} // this is would be VALUE
            title={t('shipments.shippedFrom')}
          />)

and in your component use it as

        <SelectItem
          value={addresses[value].description}
          key={addresses.id}
          text={addresses[value].description}
        />

just like dot notation you can use address['originatingAddress'] and here you can just replace it with your value variable