Click Event and Function

What is JSX?

JSX full form is JavaScript XML. Before JSX we don't write HTML and JavaScript together. But now we can write HTML and JavaScript together.

Example: let ste = "JSX";

<div>{`Hello this is ${ste}`</div>

<div>{10+15}</div>

We can use react without JSX but it's complicated to understand.

Example: React.createElement("h1", null, "This is JSX");

JSX is a JavaScript Extension Syntax used in React to easily write.class JSXDemo extends

React.Component { render() { return <h3>This is first statement</h3>; } } ReactDOM.render(<JSXDemo />, document.getElementById('root'));

class JSXDemo extends React.Component {

render() {

return <h1>Hello I am JSX.</h1>

}

}

We can use JSX anywhere without React.

Function Call

In the below example, you can call a function in a general way. So there is one issue that occurred in that before clinking he called itself.

import './App.css'

function App() {
  const handleClick = () =>{
    alert("Function call")
  }
  return (
    <>
<div className='App'>
  <h1>Hello Users</h1>
  <button onClick={handleClick()}>Click Me</button>
</div>

    </>
  )
}

export default App

If you want to use the function in react you can call a function without a round bracket. Or use the arrow function.

import './App.css'

function App() {
  const handleClick = () =>{
    alert("Function call")
  }
  return (
    <>
<div className='App'>
  <h1>Hello Users</h1>
  <button onClick={handleClick}>Click Me</button>
</div>

    </>
  )
}

export default App

import './App.css'

function App() {
  const handleClick = () =>{
    alert("Function call")
  }
  return (
    <>
<div className='App'>
  <h1>Hello Users</h1>
  <button onClick={() => handleClick()}>Click Me</button>
</div>

    </>
  )
}

export default App

If you want to call the alert directly on the onClick then you think directly write the alert. He calls again before clicking on the button. So don't write like this.

import './App.css'

function App() {
  return (
    <>
<div className='App'>
  <h1>Hello Users</h1>
  <button onClick={alert("Function call")}>Click Me</button>
</div>

    </>
  )
}

export default App

So you can use the arrow function to solve this type of problem.

import './App.css'

function App() {
  return (
    <>
<div className='App'>
  <h1>Hello Users</h1>
  <button onClick={ () => alert("Function call")}>Click Me</button>
</div>

    </>
  )
}

export default App

If you want to directly call any function use the arrow function.

Used variable in ReactJS

Using let var you can simply access the variable.

import './App.css'

function App() {
  let message = "Hey I am variable"
  const handleClick = () =>{
    alert(message)
  }
  return (
    <>
<div className='App'>
  <h1>Hello Users</h1>
  <h2>{message}</h2>
  <button onClick={() => handleClick()}>Click Me</button>
</div>

    </>
  )
}

export default App

If I try to update the variable. But variables don't update why?

import './App.css'

function App() {
  let message = "Hey I am variable"
  const handleClick = () =>{
    message = "Hey I am function"
    alert(message)
  }
  return (
    <>
<div className='App'>
  <h1>Hello Users</h1>
  <h2>{message}</h2>
  <button onClick={() => handleClick()}>Click Me</button>
</div>

    </>
  )
}

export default App

In react we can't update variables in this way that's why in react we used state and props.

Note: We used import functionality in React but it is not react functionality it is also used in JavaScript.