Doesn't pass in declared variables as props to the refactored component
Closed this issue · 2 comments
leggsimon commented
This is a really great extension, I’m loving it, thanks!
I’ve noticed a bug though. Given this code (I’ve tried to keep it similar to your gif):
const Home = () => {
const imageUrl = 'some-image-url.com';
return (
<div>
<header>
<div className="logo">
<img src={imageUrl} />
</div>
</header>
</div>
);
};
Extracting the div.logo
element results in this code
const Logo = () => (
<div className="logo">
<img src={imageUrl} />
</div>
);
const Home = () => {
const imageUrl = 'some-image-url.com';
return (
<div>
<header>
<Logo />
</header>
</div>
);
};
You can see here that the imageUrl
variable is now not defined in the Logo
component, and is unused in the Home
component.
I think this should pass in any variables as props becoming this:
const Logo = props => (
<div className="logo">
<img src={props.imageUrl} />
</div>
);
const Home = () => {
const imageUrl = 'some-image-url.com';
return (
<div>
<header>
<Logo imageUrl={imageUrl} />
</header>
</div>
);
};
-const Logo = () => (
+const Logo = props => (
<div className="logo">
- <img src={imageUrl} />
+ <img src={props.imageUrl} />
</div>
);
const Home = () => {
const imageUrl = 'some-image-url.com';
return (
<div>
<header>
- <Logo />
+ <Logo imageUrl={imageUrl} />
</header>
</div>
);
};
I’m happy to attempt a PR for this at some point if you are?
planbcoding commented
Thank you for your finding! It's totally valid.
Fixed in the latest version, please test! :)
leggsimon commented
Great! I’ll check it out when I’m back from holiday, thank you very much!