Monday, November 30, 2020

Reactjs push values to state array onclick event

Reactjs push values to state array onclick event

Hello, welcome to In this post, I will tell you, Reactjs push values to state array onclick event. Reactjs is a Javascript Library to build user interface.

In this post, I am playing with  input field and input button to push new values to state array . On button click, I am getting the input box value and that value, I am pushing to state array.

Here is the working image in reactjs array values:


Here is the working and tested code and you can add this code into your index.js file:


import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component{
      this.state = {addtask: '', tasks:[{name:'therichpost'}]};
      this.addValue = this.addValue.bind(this);
      this.updateInput = this.updateInput.bind(this);
        let tasks = this.state.tasks;
        let addtask = this.state.addtask;
      return (
        //map array data{
          return <li key={}>{}</li>
      <input type="text" onChange={this.updateInput} /><br/><br/>
      <input type="button" value="Click Me :)" onClick={this.addValue}/>

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

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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