SHARE
TWEET

Untitled

a guest Aug 20th, 2019 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class HelloMessage extends React.Component {
  2.     constructor(props) {
  3.         super(props);
  4.         this.state = {
  5.             products: props.products,
  6.         };
  7.         this.handleChange = this.handleChange.bind(this);
  8.  
  9.     }
  10.     handleChange(e,i) {
  11.         this.updated_products = this.state.products.map((element,j)=> {
  12.             if(i === j)
  13.             {
  14.                 element.price = e.target.value
  15.             }
  16.             return element;
  17.         });
  18.         this.setState(
  19.             {products: this.updated_products}
  20.         );
  21.     }
  22.     render() {
  23.         return <div>
  24.             {
  25.                 this.state.products.map((product,index) => {
  26.                     return <div>
  27.                         <input value={product.name} disabled={true}/>
  28.                         <input key={index} onChange={ e => this.handleChange(e,index)} value={product.price} />
  29.                     </div>;
  30.                 })
  31.             }
  32.             <button onClick={ ()=> this.setState({products:[ ...this.state.products, {id:2,name: 'Shurur Kobita',price: '5'}]})}>Add New Element</button>
  33.         </div>
  34.     }
  35. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top