New in reactJS, i am trying to adding an item in array by clicking on button . but could not fetch changed array

debugcn Published at Dev

Amit Rullez

I have an array in which i have 4 value , then i have a button on click i am pushing new value to the array, so initially i am showing item list of array data and then click on button i am pushing new value to array but could not update the item list . here is my code .

import React, {Component} from 'react';
import './Amit.css'; 

class Item extends Component {
  state = {
   item : [
    {
     name:'Item 1'
    },
    {
     name:'Item 2'
    },
    {
     name:'Item 3'
    },
    {
     name:'Item 4'
    }
  ]
 }

 addItem =() => {
   let item = [...this.state.item];
   item.push("New Item");
   this.setState ({ item: item });
   alert(item);
 }

 render(){
    return(
     <div className="Item-block">
        <div className="item-heading">
             <h4 className="item-heading-text"> ITEM HEADING  </h4>
        </div>
        <div className="item-add">
            <button onClick={this.addItem}> ADD NEW ITEM </button>
        </div>
        <div className="item-list">
            <ul>
                {
                  this.state.item.map((item)=> {
                    return <li name={item.name}> {item.name} </li>
                  })
                }
            </ul>
        </div>
      </div>

    );
  }

}

export default Item;

Philippe

This is how I would write it:

class Item extends Component {

  constructor (props) {

    super(props)  

    this.addItem = this.addItem.bind(this)

    this.state = {
        items : [{
          name: 'Item 1'
        },{
          name:'Item 2'
        },{
          name:'Item 3'
        },{
          name:'Item 4'
        }]
      }
  }

  addItem() {

    const items = [
      ...this.state.items, {
        name: "New Item"
      }
    ]

    this.setState ({ 
      items 
    })
  }

  renderItems() {

    const items = this.state.items.map((item, idx)=> {
      return (
        <li key={item.name + idx} name={item.name}> 
          {item.name} 
        </li>
      )
    })

    return items
  }

  render () {
    return(
        <div className="Item-block">
            <div className="item-heading">
                <h4 className="item-heading-text"> 
                  ITEM HEADING 
                </h4>
            </div>
            <div className="item-add">
                <button onClick={this.addItem}> 
                  ADD NEW ITEM 
                </button>
            </div>
            <div className="item-list">
                <ul>
                    { this.renderItems ()}
                </ul>
            </div>
        </div>
      );
  }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.