Strange behavior of conditional rendering when bypassing props in functional component

This is a bug I’ve got today. I have a parent component, that includes a nested child component with a prop passed into it. Prop named the same way as a variable, from which I get the value (idk if this is important). Prop is used later to conditional render some JSX block. In the first cycle, component gets this prop in a correct way: null passed and JSX block didn’t render. In the next cycle, when prop gets a value insted of null, it also works. But when finally prop got a null agian, like in the beginning, condition doesn’t work proper, block still appears.

Code trivia:

//doesn't work proper
const Parent = ({someProp}) => {

	//some code here...

	return (
		<Child someProp={someProp}/>
	);
};

const Child = ({someProp}) => (
	{someProp ? (<SomeJsx/>) : (null)}
);

//works great
const Parent = ({someBigProps}) => {
	var someProp = someBigProps.someProp;

	//some code here...

	{someProp ? (<SomeJsx/>) : (null)}
};

Real code shots:

[mrgurdeep]

Can you try changing your code as below. Can you also try to reproduce the issue is jsfiddle.

Try debugging code it will also help.

const Child = ({someProp}) => {
	if (!someProp) { 
		return null;
	} 
	return <SomeJsx/>;
};

[aweary]

Since there’s been no follow up or reproducible example, I’m going to go ahead and close this out.