How to use onClick event or really any other event like this?
import mycomponent from './path'
class App extends React.Component{
render()
{
<mycomponent onClick={console.log("Click"}/>
}
}
How to give mycomponent onClick event?
import React from 'react'
const mycomponent = () =>{<p>Click Me</p>}
export default mycomponent
Here are two things worth noting:
you can capture click (or other events) only on DOM elements. If you want to capture click event on your custom component, you need to delegate it to a DOM element inside the component.
what you pass to onClick should be a function. Here you are passing the result of calling that function to onClick (console.log('Click') is a function call, not a function).
Here is a running example:
const MyComponent = (props) => (<p onClick={props.click}>Click Me</p>)
class App extends React.Component {
click () {
alert('clicked')
}
render() {
return (
<div>
Provide a function to click event: <MyComponent click={this.click} />
Provide an anonymous function to click event: <MyComponent click={() => alert('yes')} />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>Also note that this lineconst mycomponent = () =>{<p>Click Me</p>} should be
const mycomponent = () => <p>Click Me</p>
If you add curly braces, you'll need to explicitly return that value.
Props is the first value passed in to a function based react component:
import React from 'react'
const mycomponent = (props) =>{<p onClick={props.onClick}>Click Me</p>}
export default mycomponent
And in your App Component:
import mycomponent from './path'
class App extends React.Component{
render()
{
<mycomponent onClick={() => console.log("Click"}/>
}
}
() => console.log("Click");