CODEWITHSUNDEEP
javascriptarraysreactjs
CodeG
CodeG

Reputation: 467

Render react component without repeating code

I have a component that needs to load a certain item according to a props it receives from the parent component.

const Contract = ({ savingsFactors, isContract }) => (
    {isContract ? (
        <PutField
        label={label}
        placeholder={placeholder}
        onBlur={...}
        items={savingsFactors === 'true' ? FORM_VALUES : FORM_VALUES_NORMAL}
        />        
    ) : (
        <PutField
        label={label}
        placeholder={placeholder}
        onBlur={...}
        items={savingsFactors === 'true' ? ANOTHER_FORM_VALUES : ANOTHER_FORM_VALUES_NORMAL}
        />
    )}
);

The only thing that changes is the values ​​inside the items.

These values ​​are objects with arrays:

const FORM_VALUES = [
    { name: 'some name', value 'some value' },
    { name: 'some name', value 'some value' },
]
const FORM_VALUES_NORMAL = [
    { name: 'some name', value 'some value' },
    { name: 'some name', value 'some value' },
]
const ANOTHER_FORM_VALUES = [
    { name: 'some name', value 'some value' },
    { name: 'some name', value 'some value' },  
]
const ANOTHER_FORM_VALUES_NORMAL = [
    { name: 'some name', value 'some value' }
]

Is there any way I don't need to repeat these two blocks of code?

Upvotes: 0

Views: 138

Answers (2)

Luis Sardon
Luis Sardon

Reputation: 514

I always like to be as explicit as I can:

const Contract = ({ savingsFactors, isContract }) => {
  const isSavingsFactors = savingsFactors === 'true';
  const formValues = isSavingsFactors ? FORM_VALUES : FORM_VALUES_NORMAL;
  const anotherFormValues = isSavingsFactors ? ANOTHER_FORM_VALUES : ANOTHER_FORM_VALUES_NORMAL;
  const items = isContract ? formValues : anotherFormValues;

  return <PutField
     label={label}
     placeholder={placeholder}
     onBlur={...}
     items={items}
  />
};

Upvotes: 1

arielhad
arielhad

Reputation: 2153

{
        let itemsToUse = savingsFactors === 'true' ? FORM_VALUES : FORM_VALUES_NORMAL;
        if (!isContract) {
            itemsToUse = savingsFactors === 'true' ? ANOTHER_FORM_VALUES : ANOTHER_FORM_VALUES_NORMAL
        }
        return <PutField
            label={label}
            placeholder={placeholder}
            onBlur={...}
            items={itemsToUse}
        />
   
    }

Upvotes: 1

Related Questions