Bug: Unable to Iterate over Symbol Type Properties in React Component

[misaka42]

React version: all

Steps To Reproduce

import React from "react";

const KEY_OF_A = Symbol.for("a");
const KEY_OF_B = "b";

export default function App() {
  return React.createElement(Foo, {
    [KEY_OF_A]: "A",
    [KEY_OF_B]: "B"
  });
}

function Foo(props) {
  return React.createElement(
    "text",
    null,
    props[KEY_OF_A] + "__" + props[KEY_OF_B]
  );
}


// -> undefined__B

Link to code example: https://codesandbox.io/s/jolly-wright-gzlxf7?file=/src/App.js

The current behavior

react/packages/react/src/ReactElement.js

Line 391 in 3808b01

for (propName in config) {

   // Remaining properties are added to a new props object
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }

The expected behavior

I'm not sure if it was intended to be designed this way, but I currently have a scenario where I need to inject some private variables into user components from the framework layer. However, these symbols are being removed during the process of passing them. So I'm wondering if it's possible to design this part to support the passing of symbol attributes?

[eben-vranken]

Isn't this just how React normally processes and handles props?

When you use React.createElement and pass props, React essentially serializes and deserializes them. In this process, non-serializable values like Symbols or functions will be lost, as you've noticed.

[misaka42]

@eben-vranken Thank you for your response. But with this scenario we are discussing here is not about passing props from a server component to a client component. i mean there is no process of serializing props via network, We are talking about the normal case of passing props between two React components. In this situation, passing functions (just like event handler) is obviously possible. Therefore, I would like to enhance it to allow the passing properties of symbols.

[sophiebits]

The goal is for React to pass a props object through unchanged in the future, mainly for performance reasons (reactjs/rfcs#107). At that time, this would work (though likely not with the createElement API directly; rather the new jsx ones that are intended as a compile target).

Using JSX is the idiomatic way to write React and symbol properties are not supported there so I would not really recommend trying to do this anyway. I would recommend using a different property naming convention or finding another way entirely to pass this data.