Doesn't pass in declared variables as props to the refactored component

[leggsimon]

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]

Thank you for your finding! It's totally valid.
Fixed in the latest version, please test! :)

[leggsimon]

Great! I’ll check it out when I’m back from holiday, thank you very much!