Categories

Sunday, October 13, 2024
#919814419350 therichposts@gmail.com
Reactjs

React js Onclick Event Handler Example

React js Onclick Event Handler Example

Hello, welcome to therichpost.com. In this post, I will tell you, React js Onclick Event Handler Example. Reactjs is a Javascript Library to build user interface.

Today, In this post, I will tell you reactjs onclick event handler working and I will the li value with reactjs onclick event and this is very interesting.

react js uses fat arrow(() =>) with onclick function.

Here is the working for React js Onclick Event Handler Example and you can add this into your index.js file:
import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component{
  constructor()
  {
    super();
    //declare custom data array of object
    this.state = {
      tasks:[
      {name:'lession1', completeed:true},{name:'lession2', completeed:false}
      ]
    }
  }
  render()
  {
    return (
      <ul>
      {
        //map array data
        this.state.tasks.map(function(task){
            return <li key={task.name} onClick={() => alert(task.name)}>{task.name}</li>
        })
      }
      </ul>
    )
  }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

 If you have any query related to this post then please do ask in below comment section and I will come with more post related to reactjs.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.