Render react component without repeating code

Question

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?

can you show us what you tried? it can definitely work that way — azium
– azium, Commented Jun 2, 2021 at 20:42
you can also define a variable items above the component, figure out what it needs to be then pass it items={items} — azium
– azium, Commented Jun 2, 2021 at 20:42

Luis Sardon · Accepted Answer · 2021-06-02 21:12:18Z

1

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}
  />
};

answered Jun 2, 2021 at 21:12

Luis Sardon

5243 silver badges9 bronze badges

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

Comments

arielhad · Accepted Answer · 2021-06-02 20:42:27Z

1

{
        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}
        />
   
    }

answered Jun 2, 2021 at 20:42

arielhad

2,2011 gold badge18 silver badges12 bronze badges

1 Comment

CodeG Over a year ago

I need to do this verification inside of const Contract?

Collectives™ on Stack Overflow

Render react component without repeating code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related