State, Life cycle, Methods & Events
Download as PPTX, PDF0 likes100 views
The document discusses state, lifecycle, methods, and events in React components. It defines state as an object containing data that causes a component to re-render when updated. Methods are functions bound to a component that can be called to handle events. Events are handled by passing a callback function as a prop rather than a string, and are named using camelCase. The component constructor or an arrow function can be used to bind methods and ensure 'this' works correctly in event callbacks.
State, Life cycle, Methods & Events
- 1. State, LifeCycle, Methods & Events by Vinay
- 2. State // Defining State this.state = { name: ‘Virat Kohli’ }; //This will not cause our component to update this.state.name = ‘Mahendra Singh Dhoni’; //Updating State this.setState({ name: ‘Mahendra Singh Dhoni’ });
- 3. First Render
- 4. State Change
- 5. Props Change
- 6. Handling Events Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: ● React events are named using camelCase, rather than lowercase. ● With JSX you pass a function as the event handler, rather than a string. // In HTML <button onclick="handleClick()"> Click Me </button> // In React <button onClick={handleClick}> Click Me </button>
- 7. Methods handleClick() { // Do some stuff } // Calling Method this.handleClick();
- 8. Methods with Events(Binding this in constructor) handleClick() { console.log(“Inside click event”, this); } // This binding is necessary to make `this` work in the callback. This binding is done inside constructor. this.handleClick = this.handleClick.bind(this); // React Element <button onClick={this.handleClick}>
- 9. Methods with Events(Using method as a property) handleClick = () => { console.log(“Inside click event”, this); } // React Element <button onClick={this.handleClick}>