Comments (13)
Could you explain the problem to me?
Key is not on props intentionally. This is explained in facebook/react#2429: you don't want to accidentally copy it over to another element, for example. It doesn't behave like a prop, and shouldn't be one.
But a library like jsx-to-string
can read element.key
without any issues.
from jsx-to-string.
Fixed in a48363c.
Released 1.0.1 with support for this.
from jsx-to-string.
Can you please provide an example on how you are trying to call jsx-to-string
and what is the expected output. Sorry but I could not understand what the problem is.
from jsx-to-string.
The problem is that if you do something like this:
let c = <Component>
<Item key={1}/>
<Item key={2}/>
</Component>;
console.log(jsxToString(c));
the output will be:
<Component>
<Item/>
<Item/>
</Component>
but should be:
<Component>
<Item key={1}/>
<Item key={2}/>
</Component>
from jsx-to-string.
Weird. thanks for sharing. let me try that locally.
from jsx-to-string.
I cannot seem to reproduce it. And even in your site I can see the props are there:
<Container>
<Box rows={6}>
<BoxChild wide={1}>
<div style={{"backgroundColor": "red", "color": "white", "textAlign": "center"}}>
Hola
</div>
</BoxChild>
<BoxChild wide={2}>
<div style={{"backgroundColor": "red", "color": "white", "textAlign": "center"}}>
Soy
</div>
</BoxChild>
<BoxChild wide={1}>
<div style={{"backgroundColor": "red", "color": "white", "textAlign": "center"}}>
una
</div>
</BoxChild>
<BoxChild wide={2}>
<div style={{"backgroundColor": "red", "color": "white", "textAlign": "center"}}>
grilla
</div>
</BoxChild>
<BoxChild wide={3}>
<div style={{"backgroundColor": "red", "color": "white", "textAlign": "center"}}>
con 6 rows
</div>
</BoxChild>
<BoxChild wide={3}>
<div style={{"backgroundColor": "red", "color": "white", "textAlign": "center"}}>
y 6 Box.Child
</div>
</BoxChild>
</Box>
</Container>
from jsx-to-string.
Yep, props are there but the key prop isn't. Use the chrome inspector + React plugin and you will see that every BoxChild has a key prop but it's not displayed. So the problem is not with all the props, but the key prop.
I will try to find out what's the problem, because if you couldn't reproduce it, maybe is related with dependencies versions.
from jsx-to-string.
I see the problem you are facing now.
key
is coming straight from react and they hide it in the react props.
I cannot think about a good way of solving this with jsx-to-string. If you have any ideas on how to solve this please advise.
from jsx-to-string.
To read the key from an element, just read it: element.key
. It is not in props, but it is on the element (and that is how React reads it).
from jsx-to-string.
element.key
is undefined and access to it is disabled, but maybe a setting can be added to define a prop
name as an alternative to display the key.
It's not a clean solution but it's useful.
from jsx-to-string.
Access is not “disabled” to element.key
. You’ll get a warning if you try to access element.props.key
(that doesn’t exist), but <Foo key="123" />.key
is "123"
.
Otherwise React itself wouldn’t be able to read it. 😉
from jsx-to-string.
EDIT: element.key
is not undefined, my mistake
from jsx-to-string.
Thanks @gaearon I will make the modification on jsx-to-string
. Did not know that key
is on the element so that is great I learned something new :)
from jsx-to-string.
Related Issues (20)
- seen this similar package? HOT 1
- Can't handle null-value properties HOT 1
- Attaching or binding a function on the "onClick" event has an error. HOT 4
- Adds incorrect whitespace to output (needs "no-format" option) HOT 2
- JSX formatting HOT 1
- "item is not defined" with array of objects containing function HOT 1
- alternate boolean syntax HOT 3
- After updating to 1.2.0 not possible to stringify array
- Ignoring styled-jsx
- item is undefined, when parsing objects with a function. HOT 1
- getting error (0 , _immutable.isImmutable) is not a function HOT 2
- Nested elements not correctly parsed HOT 4
- Option to put props on single line
- Add support for fragments HOT 1
- Option to not render values HOT 1
- Still active? + Bug HOT 1
- Adding Array of items as prop, set default value to [...] similar to function HOT 5
- className outputs className, not class HOT 5
- Can't handle React components referenced within object properties. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsx-to-string.