value|defaultValue={Symbol|Function} should be ignored, not stringified

[gaearon]

Regression in master from #11534.
Found it thanks to the attribute fixture snapshots.

[nhunzaker]

Just for clarity: This is the correct behavior for Symbols:

With my change, value and defaultValue never pass through the property sanitation layer. React tries to stringify symbols, which throws an error, and functions get turned into "function () {}".

[gaearon]

Now that I looked at this again, the update codepath was already broken. This just made the initial code path match it. So this is actually an improvement. We should still get #11741 to completion to have consistent sane behavior, but IMO this is not as urgent as I thought at first.

[kanlanc]

Is it resolved or can I start working on it?

Sorry new to open source

[gaearon]

I think the issue still exists, it’s just more consistent now

[kanlanc]

just for reference how do you call dibs on a bug

[gaearon]

You got it

[t4deu]

Ping @highskillzz, do you still on this issue?

If not, I will take it, ok @gaearon 😉

[kanlanc]

Sure

[raunofreiberg]

What's the status on this one? It doesn't seem like this has been resolved since there are no warnings on assigning symbols or functions to the defaultValue prop. Even found a few TODO-s in the ReactDOMInput test.

[gaearon]

Feel free to grab it. I don't know if it's fixed or not but it's worth checking.

[krrishdholakia]

@gaearon is this still open? if so, how do i claim it?

[philipp-spiess]

@krrishdholakia Yes this is still up for grabs if it is not already fixed! Feel free to start looking into it and reach out if you have any issues along the way. 😊

[raunofreiberg]

I checked earlier and I might be wrong but I'm quite sure this was fixed earlier by @nhunzaker

// Same goes for the `value` prop
return (
      <div>
        <input defaultValue={Symbol("test")} />
        <input defaultValue={() => {}} />
      </div>
);

produces

Which indicates that both symbols and functions are not stringified? I've still went ahead and added warnings for the defaultValue prop in #13360. Maybe useful.

[raunofreiberg]

Although, textarea seems to behave differently - not sure if intentionally or not.

function App() {
  return (
    <div>
      <textarea defaultValue={() => {}} />
      <textarea value={() => {}} />
      <textarea value={Symbol("test")} />
    </div>
  );
}

Both functions get stringified and appended as text into the textarea itself. The symbol itself crashes the application with a TypeError: Cannot convert a Symbol value to a string

For reproducing: https://codesandbox.io/s/pj40nrp5px

[philipp-spiess]

@raunofreiberg Thanks for looking into that! I agree that textarea should behave the same 👍

[raunofreiberg]

This looks perfect now. Thank you very much 🙂 If you want a follow-up task, you could work on the same fix for elements.

@philipp-spiess Do you mean working on the select tag 🙂? If so, I'd be happy to investigate further on that as well.

[skyras13]

Just starting with Open Source. Does this bug still need help being fixed?

[OliverRadini]

Fairly sure this should be closed. Looking at the behaviour of both input and textarea elements, when they are passed, as value or defaultValue, a function or a symbol, they will never stringify this. For value, they will have a console error. For defaultValue, they will not, as shown in this table:

Markup	Shows error	Renders stringified version
<input value={() => {}}>	Yes	No
<input defaultValue={() => {}}>	No	No
<textarea value={() => {}}>	Yes	No
<textarea defaultValue={Symbol("test")}>	No	No
<input value={Symbol("test")}>	Yes	No
<input defaultValue={Symbol("test")}>	No	No
<textarea value={Symbol("test")}>	Yes	No
<textarea defaultValue={Symbol("test")}>	No	No

As shown in this code: https://codesandbox.io/s/pedantic-fast-25khi0

I may have misunderstood things :D But it seems like this is resolved

[Akashay-Anand]

Hello @gaearon, Is this issue resolved? if not, can I work on this one...?

[Almas456]

When using the syntax "value|defaultValue={Symbol|Function}" in a code implementation, it is typically intended as a way to provide default values for a variable or parameter. The use of symbols or functions as default values can be a powerful tool in certain cases, such as when dealing with complex or dynamic data structures.

When it comes to stringification, however, it is generally not recommended to stringify symbols or functions. This is because symbols and functions are not simple data types that can be easily converted to strings. When they are stringified, they lose their original functionality and become simple strings, which can cause unexpected behavior in the code.

Therefore, it is recommended that when using "value|defaultValue={Symbol|Function}" syntax, the symbols or functions should be handled and evaluated directly in the code, rather than being stringified. This will ensure that their original functionality and intended behavior are preserved.

[yoo-ssup]

Hey @gaearon, is this issue resolved? I'm interested to work on it.

[chandanbauri]

Hi @gaearon ,
Could you please assign issue to me I'm excited to know if this is going to be my first contribution to react .

[kethesainikhil]

Hi @gaearon,
I am interested to take up this issue and I want work on it could you please assign me this and also I wanted you to Help me to contribute for this I am ready to learn and I am an intermediate coder in react

[koyuncuoglum95]

Hey @gaearon, I'd love to contribute this project. I'm here for the first time.

[Mule-ME]

Hey @gaearon, I would love to contribute this project. it's my first time to be here, I am an intermediate coder in react

[its-kunal]

Hey @gaearon, I am interested in this issue and want to contribute.

[sykalerio]

Hi there,

My name is [Elpida Syka Lerioti] and I'm interested in helping out with this issue. I've been studying testing and I think this would be a great opportunity for me to apply my skills and learn more about React.

I've read through the issue and I think I have a good understanding of the problem and the proposed solution. However, I'm new to the React project and I would appreciate any guidance or help you could give me to get started with testing.

Thanks for your time and I look forward to working with you!

Best regards,
Elpida Syka Lerioti

[MengLinMaker]

@sykalerio I think this was solved in #22841

A test codesandbox seem to confirm that the stringified behaviour is fixed.

I'm in the same boat, trying to contribute for the first time. I don't know why this issue isn't closed. Maybe I misunderstood the situation.

Can't seem to locate the test file though.

[MengLinMaker]

@gaearon, should this issue be closed?

[Vishrut19]

Is this issue still Open?

[bhanu567]

hey @gaearon is this issue still open ??

[theQuery]

Should this be closed or is there still some unexpected behavior occurring with this? 🤔

[NIKHILNAIR21]

is this issue is still open? @gaearon

[Tabhi109]

@gaearon Is this issue still open , Please assign it to me

[ValeriaHoody]

Hey, is this issue still open, interested to work on it.

[SouSingh]

Is it still open or closed? I would like to work on it

[DerickT02]

Is this still open?

[IshadP]

Is the issue still open? I am interested to work on it

[shobhnaawasthi]

Does this issue still persist? I am interested to work on it

[AmKreta]

@gaearon is this still open ? I have found a solution and want to make a pr !

[yogesh10-r]

Hi @gaearon !
is this still open? I'd like to contribute...

[mishchief]

For everyone coming here as per #11734 (comment)

This issue has been fixed...

[sankshit]

@gaearon It would be helpful if you guys can close this issue

[ahmaddonishyar]

Hello , I'm here for the first time and would like to contribute this project.

[chiragmetaliya]

Hello, I believe I could contribute to this project. Can someone please clarify whether the issue is closed? I'm here for first time and it seems from previous thread comments that this issue is already closed.

[mishchief]

Hello, I believe I could contribute to this project. Can someone please clarify whether the issue is closed? I'm here for first time and it seems from previous thread comments that this issue is already closed.

Read the thread this is not an issue anymore and needs to be closed...