<p dir="auto"><strong>feature</strong></p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
On the new developer tool you are unable to see what property type the value. You used to be able to see if the value was a string or int because of the quotation marks (for example id: "1" (string) or id: 1 (int)). Both string and int are shown without quotes.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
I want to see if the value inside the prop or state is an string or integer by using quotation marks on the value.<br>
<code class="notranslate">id: "1"</code></p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
I'm using version:<br>
4.0.5 (8/19/2019)</p>
<p dir="auto">Did this work in previous versions of React?<br>
Yes, 3.*</p>
<p dir="auto">Follow up to a discussion thread on <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="18562843" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/294" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/294/hovercard" href="https://github.com/facebook/react/pull/294">#294</a> and a Messenger chat with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gaearon">@gaearon</a>.</p>
<p dir="auto">The current UI for editing props/state/hooks values has a couple of shortcomings:</p>
<ul dir="auto">
<li>strings/numeric values are sometimes of an unclear type. (DevTools uses the correct <code class="notranslate">&lt;input type&gt;</code> but this is subtle. Showing e.g. quotation marks around strings could be more helpful.</li>
<li><code class="notranslate">null</code> initial values can only become strings at the moment. (DevTools does not attempt to parse numeric or boolean values and change the input type. If it did, we would probably also need to enable a way for you to opt back out of that input type somehow in case it was incorrect.)</li>
<li>fields that maybe support multiple types (e.g. string | number) are locked into a single type (whichever type they happen to be initially).</li>
</ul>
<p dir="auto">Additional quirks that might be worth ironing out:</p>
<ul dir="auto">
<li>Non-editable strings are currently wrapped in quotation marks but editable ones aren't.</li>
</ul>
<hr>
<p dir="auto">Originally reported via <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="455790472" data-permission-text="Title is private" data-url="https://github.com/bvaughn/react-devtools-experimental/issues/321" data-hovercard-type="issue" data-hovercard-url="/bvaughn/react-devtools-experimental/issues/321/hovercard" href="https://github.com/bvaughn/react-devtools-experimental/issues/321">bvaughn/react-devtools-experimental#321</a></p>