class HelloMessage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            products: props.products,
        };
        this.handleChange = this.handleChange.bind(this);

    }
    handleChange(e,i) {
        this.updated_products = this.state.products.map((element,j)=> {
            if(i === j)
            {
                element.price = e.target.value
            }
            return element;
        });
        this.setState(
            {products: this.updated_products}
        );
    }
    render() {
        return <div>
            {
                this.state.products.map((product,index) => {
                    return <div>
                        <input value={product.name} disabled={true}/>
                        <input key={index} onChange={ e => this.handleChange(e,index)} value={product.price} />
                    </div>;
                })
            }
            <button onClick={ ()=> this.setState({products:[ ...this.state.products, {id:2,name: 'Shurur Kobita',price: '5'}]})}>Add New Element</button>
        </div>
    }
}