I have the following code/snippet;
class App extends React.Component {
loginComponent = <button onClick={this.signUp}>Sign Up</button>;
signUp = () => {
alert("test");
}
render() {
return(
<div>
{this.loginComponent}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"));
#root {
width: 50%;
height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
When signUp uses Arrow Syntax, the function doesn't execute. When I use regular syntax;
signUp() {
alert("test);
}
It executes fine. Any idea as to what my problem is, here?