Context is assigned to undefined when it's declared in JSX #14586
Description
Do you want to request a feature or report a bug?
bug
Related issue: #14418
What is the current behavior?
context variable is set to undefined in the codes below, when it's used in JSX.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
// test.js
export const handlClick = function() {
console.dir(this); // == undefined;
}// App.js
import { handleClick } from './test';
class App extends Component {
render() {
return (
<a onClick={handleClick}>Click me</a>
);
}
}What is the expected behavior?
Either window or App or something that isn't undefined
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
{
"name": "r",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}Extra: Used create-react-app to set this demo project up, using web storm as the IDE.
Through debugging my own code, I found this unexpected bug and started to track of its paths. And found out there's a function invoked midst its path and I think this invoked function ended up passing the undefined context to the endpoint, my own function.
I attached the code lines I found, I'm not still sure if this is related to this issue, though.
Thanks for your time.
// react-dom.development.js
function executeDispatch(event, simulated, listener, inst) {
var type = event.type || 'unknown-event';
event.currentTarget = getNodeFromInstance(inst);
invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
event.currentTarget = null;
}