React doesn't support a lot of javascript features

While trying to build a javascript calculator with react as part of Front-End Developer Project, I found that map Data Structure is not supported in react. Similarly a lot of javascript features like for loop (I know map function can be a substitute) are not supported in react. Objects have their own order so i believe we have pretty limited scope when It comes to data structures. I wonder why despite all this, react is so popular.

A calculator has so many button elements and according to FCC project guideline, each button has to have an id like


 <button id='one' > 1 <button> 


which is a lot of repetition so I wanted to create an object or map like data structure like this.

const labels = new map([1, 'one'], [2, 'two'] ) 

and then in my JSX, I wanted to return a button for each entries in the map. But I found out that map data structure is not supported in javascript.

Then, I thought I could use object as objects are supported but it changes the order in which I wanted things to be.

const labels = {
  AC: "clear",
  "/": "divide",
  X: "multiply",
  7: "seven",
  8: "eight",
  9: "nine",
  "-": "subtract",
  4: "four",
  5: "five",
  6: "six",
  "+": "add",
  1: "one ",
  2: "two",
  3: "three",
  "=": "equals",
  0: "zero",
  ".": "decimal",
};

export const ButtonContainer = () => {
  return <div id="buttonContainer">{console.log(Object.keys(labels))};</div>;
};

I wanted to use it in a way that for each entry, I would render a button but it changes the order. If you run the above snippet, it logs on console in this order :

0: "0"
1: "1"
2: "2"
3: "3"
4: "4"
5: "5"
6: "6"
7: "7"
8: "8"
9: "9"
10: "AC"
11: "/"
12: "X"
13: "-"
14: "+"
15: "="
16: "."
length: 17
__proto__: Array(0)

which is not desired.

I wonder what is the best solution in such cases. Is it essential to type all buttons individually in a lot of repetitive way or is there a way to do this dynamically? I would want you guys to give your valuable suggestion on this to me.

I know it’s very long and thanks for your time and patience.

First of all, new map() will certainly throw an error, it’s new Map() (uppercase).

Also, since React is basically JS, I’m quite sure that every data structure you can use in JS is also supported in React.

Is it possible that there’s some kind of confusion regarding Map (the data structure) and .map (the array method)?

1 Like

You can combine a Map (capital) data structure, with the Array.map function to iterate over a collection, you can do it in JS so you can in React too :slight_smile:

const labels = new Map([[1, 'one'], [2, 'two'] ])
// mind it's the Map data structure 
// and also it's a 2D array.
Array.from(labels).map(([k, v]) => console.log(`The key is ${k} and the value is ${v}`))

Reference:
Map

Hope it helps :sparkles:

[edit]
I forgot that you can spread a map as well due to the fact that implements an Iterable.
so you can simply

[...myMap].whateverArrayMethodYouWant()

// like
[...myMap].map()
[...myMap].reduce()
// and so on

There’s nothing in JS that isn’t supported on React, it doesn’t use a special limited subset of the language.

Going past the map/Map confusion (object constructors are PascalCase by convention in JS: new Map, new Set, new Object, new MyClass, new MySpecialDataStructure) I assume you’re talking about JSX. JSX is an extension to JS, and it isn’t React. It’s a way of writing tree structures (eg the DOM is a tree structure) using tokens that you can nest and give attributes to (like <MyComponent>). You write something using JSX, then you run it through program that converts that to JS function calls.

So

<ul id="example"><li>Hello<li></ul>

Isn’t HTML, when it’s converted in the context of React it’s:

React.createElement("ul", { id: "example" }, [
  React.createElement("li", null, "Hello")
]);

First argument is the name of the node, used so the program used to render it to the DOM (ReactDOM) knows which function it should use to create the element that will appear. Second argument is a map of attributes. Third argument is children, which can be null (no children), a string (will render a text node to the DOM), an element/array of elements (each of which is another one of these functions).

So if you try to do something like

const listItems = ["item 1", "item2"];


// later
<ul id="example">{
  for (const item of listItems) <li>{item}</li>
}</ul>

That’s nonsensical, because

React.createElement("ul", { id: "example" }, [
  for (const item of listItems) React.createElement("li", null, "Hello")
]);

Is just completely invalid JS.

This is fine:

const Items = ({listItems}) => {
  const listToRender = [];

  for (const item of listItems) {
    listToRender.push(<li>{item}</li>);
  }

  return <>{ listToRender}</>;
}

// Later
<ul id="example"><Items listItems={["item 1", "item2"]} /></ul>

But it’s pretty pointless doing that just to avoid writing:

<ul id="example">{ ["item 1", "item2"].map((item) => <li>{item}</li>)}</ul>

In all Browsers/engines that respect the ES2015 specification (so not old browsers, but almost everything else), objects are ordered:

  • integer keys in ascending order
  • string keys in insertion order
  • symbol names in insertion order

But the purpose of objects when you use them directly is not to be an ordered map: you use them as a dictionary, look stuff up by key.

But even if you couldn’t use JS’ Map, JS has an ordered data structure that you can iterate over: Array. So this works fine:

const labels = [
  ["AC", "clear"],
  ["/", "divide"],
  ...etc
];

So does this:

const labels = [
  { label: "AC", id: "clear"},
  { label: "/", id: "divide"},
  ...etc
];
1 Like

Just to be clear, saying “React doesn’t support a lot of javascript features” would be like saying “hiking doesn’t support a lot of walking features” - one is just an application of the other. There is no vanilla JS that you can’t use in React because React is JS.

I don’t want to beat a dead horse, but I think it is an important thing to understand.

1 Like

I understand that I misunderstood certain things I read somewhere while I was writing map instead of Map and then thought it’s not supported. I hope the web dev community will accept me despite all this :joy:

1 Like

Don’t worry, it took me an embarrassing amount of time to realise that a Type Error doesn’t refer to a typo (= syntax error) but to data types.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.