Table-Driven Method: How Tchaca Stopped Suffering from if and switch in React

This content originally appeared on DEV Community and was authored by Werliton Silva

Once upon a time, there was a developer named Tchaca. He was a chill guy, wrote mostly clean code, and had a soft spot for strong coffee and React components. But there was one thing that haunted our hero: endless conditionals.

Picture a component that renders different types of cards depending on the user type. Tchaca used to write something like this:

if (user.type === 'admin') {
  return <AdminCard />;
} else if (user.type === 'guest') {
  return <GuestCard />;
} else if (user.type === 'subscriber') {
  return <SubscriberCard />;
} else {
  return <DefaultCard />;
}

It looked innocent enough. But over time, the component turned into a monster of if-else, switch-case, and developer tears. Until one stormy night filled with tense deploys, Tchaca discovered the Table-Driven Method.

What Is the Table-Driven Method?

It’s a technique where you replace conditional logic with a data structure – usually an object or array – that maps inputs to actions or components.

Instead of writing a bunch of ifs, you create a “table” that says: “If the type is X, use Y.”

The Magic in React

Tchaca rewrote his component like this:

const cardMap = {
  admin: AdminCard,
  guest: GuestCard,
  subscriber: SubscriberCard,
  default: DefaultCard,
};

const UserCard = ({ user }) => {
  const CardComponent = cardMap[user.type] || cardMap.default;
  return <CardComponent />;
};

Boom! No if, no switch, just clean and readable code.

Another Example: Dynamic Forms

Tchaca also struggled with forms that changed depending on the field type. Before, he wrote:

if (field.type === 'text') {
  return <TextInput />;
} else if (field.type === 'select') {
  return <SelectInput />;
} else if (field.type === 'checkbox') {
  return <CheckboxInput />;
}

After embracing the Table-Driven Method:

const inputMap = {
  text: TextInput,
  select: SelectInput,
  checkbox: CheckboxInput,
};

const DynamicField = ({ field }) => {
  const InputComponent = inputMap[field.type] || DefaultInput;
  return <InputComponent {...field.props} />;
};

Why Use Table-Driven?

• More readable: You can glance at the map and instantly understand what’s going on.
• Easier to maintain: Adding a new type? Just add a new entry to the object.
• Fewer bugs: Less logic means fewer chances to mess things up.

When NOT to Use It

Not every problem needs a table. If the logic is super complex or depends on multiple variables, Table-Driven might not be the best fit. But for simple mappings, it’s gold.

What About the Object Lookup Pattern?

Great question. The Object Lookup Pattern is actually a specific way to implement the Table-Driven Method – using JavaScript objects as direct maps.

Here’s a quick comparison:

Example: Action Buttons

Using Table-Driven Method (Array):

const actionTable = [
  { type: 'save', label: 'Save', onClick: () => saveData() },
  { type: 'delete', label: 'Delete', onClick: () => deleteData() },
  { type: 'cancel', label: 'Cancel', onClick: () => cancelAction() },
];

const ActionButton = ({ actionType }) => {
  const action = actionTable.find(a => a.type === actionType) || {};
  return <button onClick={action.onClick}>{action.label || 'Action'}</button>;
};

Using Object Lookup Pattern:

const actionMap = {
  save: { label: 'Save', onClick: () => saveData() },
  delete: { label: 'Delete', onClick: () => deleteData() },
  cancel: { label: 'Cancel', onClick: () => cancelAction() },
};

const ActionButton = ({ actionType }) => {
  const { label, onClick } = actionMap[actionType] || { label: 'Action', onClick: () => {} };
  return <button onClick={onClick}>{label}</button>;
};

Conclusion

Tchaca now lives in peace. His components are lean, his deploys are smooth, and he even started using Table-Driven Method in tests and validations.

If you’re tired of endless if-else blocks, maybe it’s time to follow in Tchaca’s footsteps. Build your table, map your actions, and let your code breathe.

Have you used the Table-Driven Method or Object Lookup Pattern in your projects? Drop a comment – or send Tchaca a virtual coffee .

This content originally appeared on DEV Community and was authored by Werliton Silva