How to Map a Dictionary to Components in React?

Sometimes, we want to map a dictionary to components in React.

In this article, we’ll look at how to map a dictionary to components in React.

Map a Dictionary to Components in React

To map a dictionary to components in React, we can use the Object.entries to return an array of key-value pair arrays.

Then we can call map on that to map those entries to components.

For instance, we write:

import React from "react";

const options = {
  close: "Close",
  submit: "Submit",
  print: "Print"
};

export default function App() {
  return (
    <div>
      {Object.entries(options).map(([key, value]) => (
        <button key={key}>{value}</button>
      ))}
    </div>
  );
}

to call Object.entries on the options object to return an array of key-value pair arrays.

Then we call map with a callback that takes the key-value pair array and destructure it in to key and value.

Then we return a button with the key prop set to key and value used as the text content of the button.

Now we should see the Close, Submit, and Print buttons displayed.

Conclusion

To map a dictionary to components in React, we can use the Object.entries to return an array of key-value pair arrays.

Then we can call map on that to map those entries to components.