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

gaearon · 2017-12-01T01:01:08Z

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

nhunzaker · 2017-12-01T01:24:40Z

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 · 2017-12-01T19:40:39Z

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.

- the capture attribute changed in #11424 - changes to value/defaultValue handling of functions/Symbols are from #11534, but as per #11734 (comment) this is actually not a new problem so we're okay with it

kanlanc · 2018-01-06T13:30:54Z

Is it resolved or can I start working on it?

Sorry new to open source

gaearon · 2018-01-06T13:32:32Z

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

kanlanc · 2018-01-06T13:34:21Z

just for reference how do you call dibs on a bug

gaearon · 2018-01-06T14:32:50Z

You got it

t4deu · 2018-02-01T23:28:16Z

Ping @highskillzz, do you still on this issue?

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

kanlanc · 2018-02-02T05:50:37Z

Sure

raunofreiberg · 2018-03-16T15:37:02Z

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 · 2018-08-09T17:33:43Z

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

krrishdholakia · 2018-08-10T10:21:36Z

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

philipp-spiess · 2018-08-10T10:25:27Z

@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 · 2018-08-10T10:36:49Z

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 · 2018-08-10T10:45:37Z

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 · 2018-08-10T17:39:32Z

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

raunofreiberg · 2018-08-14T09:59:37Z

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.

code4cake · 2018-09-07T10:14:07Z

@philipp-spiess thanks, are there any other "good first issues" that I could pick up? thanks

philipp-spiess · 2018-09-07T10:23:28Z

@dantesolis You can look for good first issue (taken) and see if there was recent activity. If not, you can usually work on them. In our contribution guides we mention a 2 week period before others can start working on the issue as well.

I also think you can take a look at #11299. As far as I know there is still at least one test that uses private API and is not tackled by a community member (ReactErrorUtils-test.internal.js).

What's also great is if you can improve our test or type coverage. You'd need to research how to find uncovered lines since I don't have a solution for that right now but Jest comes with a coverage tool which might be helpful.

Let me know if you're stuck with any of the above steps. 🙂

code4cake · 2018-09-10T10:33:46Z

@philipp-spiess then I would be giving issue-12548 a try, since I think someone already asked for #11299 before me, but I'll also keep an eye open for that one. Thanks.

About adding coverage, yes, jest comes with coverage. I'll check that one as well. ;)

kambleaa007 · 2019-08-07T11:37:38Z

is it solved ?

caelinsutch · 2020-05-21T04:25:49Z

What ever happened to this?

ktfth · 2021-03-30T01:32:43Z

I can work on that task? What is needed to finish that task?

axaysushir · 2021-05-01T10:21:30Z

Can i look at it? And what is guidelines for contributing? I am new to open source.

sebuelias · 2021-05-16T13:29:55Z

Can I take this issue up?

reez12g · 2021-07-21T07:12:11Z

I'm going to work on this issue.
If you are already working on it, please let me know!

Madanaa · 2021-08-19T13:07:35Z

@bvaughn hi I am new here but I want to solve it.

Pankajadhana97-bit · 2021-08-20T17:14:41Z

function App() {
return (

);
}

Mukulbaid63 · 2021-10-26T12:23:08Z

@bvaughn Can i take it, will complete in a week?

bvaughn · 2021-10-26T13:46:39Z

Sure.

mdanyalkhan · 2021-11-23T20:05:59Z

Hi,

@bvaughn may I now take this? I have examined the code and I believe I've come up with a potential solution

bvaughn · 2021-11-24T16:04:11Z

Sure.

ibandim123 · 2021-11-30T15:36:17Z

This problem has been resolved??

mdanyalkhan · 2021-12-05T15:53:26Z

Hey! I've set up a PR to address the issue (SSR side for option elements) #22841, @bvaughn or anyone else in the React team, let me know your thoughts!

michaelCHU95 · 2021-12-28T07:21:43Z

@philipp-spiess @bvaughn Hi guys, what's the latest status of this PR? Is it still open? I was trying out for both <textarea> and , the invalid props warning seemed to work fine.

AK1304 · 2022-01-18T04:58:49Z

hey @philipp-spiess is this issue still unresolved , I am new to open source and I would like to give it a try

AK1304 · 2022-01-18T05:13:00Z

please let me know some good first issues that I can work on as I am new to open source

cesarvargas00 · 2022-02-03T04:39:34Z

I believe mdanyalkhan solved it in his PR #22841.

its-kunal · 2022-03-14T01:33:07Z

@gaearon can I start working on this.

EngNelson · 2022-04-09T00:57:11Z

Hello, I am Nelson, I am new here and I want to work on the first issue but I need someone to guide me.

gaearon assigned nhunzaker Dec 1, 2017

gaearon added the Type: Bug label Dec 1, 2017

nhunzaker mentioned this issue Dec 1, 2017

Remove dead code from DOMPropertyOperations #11740

Merged

nhunzaker mentioned this issue Dec 1, 2017

Ensure value and defaultValue do not assign functions and symbols #11741

Merged

gaearon added the Component: DOM label Dec 1, 2017

gaearon added Difficulty: starter good first issue labels Jan 5, 2018

gaearon added good first issue (taken) and removed good first issue labels Jan 6, 2018

gaearon added good first issue and removed good first issue (taken) labels Aug 9, 2018

raunofreiberg mentioned this issue Aug 10, 2018

Enable warnings for the defaultValue prop #13360

Closed

raunofreiberg mentioned this issue Aug 10, 2018

Fix passing symbols and functions to textarea #13362

Merged

necolas added the React Core Team label Jan 8, 2020

bvaughn added good first issue and removed good first issue (taken) labels Mar 25, 2021

bvaughn unassigned nhunzaker Aug 19, 2021

mdanyalkhan mentioned this issue Nov 27, 2021

Show warning on invalid value for option #22841

Open

michaelCHU95 mentioned this issue Jan 9, 2022

Adding the Warning when defaultValue = {Symbol | Function} #23083

Open

sebmarkbage mentioned this issue Mar 14, 2022

test: Update attribute fixture snapshot #24083

Merged

Mar	APR	May
	27
2021	2022	2023

facebook / react Public

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

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

Comments

gaearon commented Dec 1, 2017

nhunzaker commented Dec 1, 2017

gaearon commented Dec 1, 2017

kanlanc commented Jan 6, 2018 • edited

gaearon commented Jan 6, 2018

kanlanc commented Jan 6, 2018

gaearon commented Jan 6, 2018

t4deu commented Feb 1, 2018

kanlanc commented Feb 2, 2018

raunofreiberg commented Mar 16, 2018 • edited

gaearon commented Aug 9, 2018

krrishdholakia commented Aug 10, 2018

philipp-spiess commented Aug 10, 2018 • edited

raunofreiberg commented Aug 10, 2018 • edited

raunofreiberg commented Aug 10, 2018

philipp-spiess commented Aug 10, 2018

raunofreiberg commented Aug 14, 2018

code4cake commented Sep 7, 2018

philipp-spiess commented Sep 7, 2018

code4cake commented Sep 10, 2018 • edited

kambleaa007 commented Aug 7, 2019

caelinsutch commented May 21, 2020

ktfth commented Mar 30, 2021

axaysushir commented May 1, 2021 • edited

sebuelias commented May 16, 2021

reez12g commented Jul 21, 2021 • edited

Madanaa commented Aug 19, 2021

Pankajadhana97-bit commented Aug 20, 2021

Mukulbaid63 commented Oct 26, 2021

bvaughn commented Oct 26, 2021

mdanyalkhan commented Nov 23, 2021

bvaughn commented Nov 24, 2021

ibandim123 commented Nov 30, 2021

mdanyalkhan commented Dec 5, 2021

michaelCHU95 commented Dec 28, 2021

AK1304 commented Jan 18, 2022

AK1304 commented Jan 18, 2022

cesarvargas00 commented Feb 3, 2022

its-kunal commented Mar 14, 2022

EngNelson commented Apr 9, 2022

kanlanc commented Jan 6, 2018 •

edited

raunofreiberg commented Mar 16, 2018 •

edited

philipp-spiess commented Aug 10, 2018 •

edited

raunofreiberg commented Aug 10, 2018 •

edited

code4cake commented Sep 10, 2018 •

edited

axaysushir commented May 1, 2021 •

edited

reez12g commented Jul 21, 2021 •

edited