CODEWITHSUNDEEP
javascriptreactjs
Dhruv Marwha
Dhruv Marwha

Reputation: 1074

Passing Parameters to a function on an onChange Event along with field data

I am trying to update the products price and total cost based on any products quantity getting changed which is done via a text field which has minimum and maximum quantities.Sp when the quantity changes,i will get the updated quantity and price for that product on the backend and update it appropriately on the frontend.So i tried to use an anonymous function and pass the parameters to another function but i get an error saying that e.target.value is undefined.Here is the code i have written/tried so far.

import React from 'react'
import App from './App'
import Cookies from 'universal-cookie'
import './view_cart.css'
import {ToastContainer, toast,style} from 'react-toastify'

var hiding='';
class View_cart extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={item_list:{},"total_items_price":'',product_count:''}
    this.view_cart_details=this.view_cart_details.bind(this)
    this.delete_item_cart=this.delete_item_cart.bind(this)
    this.product_state=this.product_state.bind(this)
  }

  registeration_notification(value_to_render)
  {
    toast(value_to_render,
      {
        //position: toast.POSITION.BOTTOM_CENTER,
        autoClose: 3000,
      }
    );
  }

  product_state(e,product_name,manufacturer)
  {
    this.setState({"product_count":e.target.value})
    console.log(this.state.product_count)
    console.log(product_name,manufacturer)
  }

  display_cart()
  {
    //console.log(Object.keys(this.state.item_list))
    const mapping = Object.keys(this.state.item_list).map((item,id) =>
    {
      console.log(this.state.item_list[item]['image_path'])
      var location = require('./Images/'.concat(this.state.item_list[item]['image_path']))
      //console.log(location)
      return (
        <div>
          <div className="container">
            <table id="cart" className="table table-hover table-condensed">
              <thead>
                <tr>
                  <th style={{width:50}}>Product</th>
                  <th style={{width:10}}>Price</th>
                  <th style={{width:8}}>Quantity</th>
                  <th style={{width:22}} className="text-center">Subtotal</th>
                  <th style={{width:10}}></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td data-th="Product">
                    <div className="row">
                      <div className="col-sm-2 hidden-xs"><img src={location} alt="..." className="img-responsive"/></div>
                      <div className="col-sm-8">
                        <h4 className="nomargin">{this.state.item_list[item]["Name"]} {'by '.concat(this.state.item_list[item]["manufacturer"])}</h4>
                      </div>
                    </div>
                  </td>
                  <td data-th="Price">{this.state.item_list[item]["original_price"]}</td>
                  <td data-th="Quantity">
                    <input type="number" min="1" max="10" value={this.state.product_count} onChange={(e) => this.product_state(this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'],e)} placeholder="Min 1 Max 10" className="form-control text-center"/>
                  </td>
                  <td data-th="Subtotal" className="text-center">{this.state.item_list[item]['price']}</td>
                  <td className="actions" data-th="">
                    <button className="btn btn-danger btn-sm"  style ={{hiding}} onClick={() =>this.delete_item_cart(this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'])}><i className="fa fa-trash-o"></i></button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
          )
    })
  return mapping
}

  sample_string()
  {
    console.log("ONCLICK WORKING")
  }
  sample_cookie_output()
  {
    const test_cookie_testing = new Cookies();

    var auth_string='Token '
    console.log((auth_string.concat(test_cookie_testing.get('Authorization'))),typeof((auth_string.concat(test_cookie_testing.get('Authorization')))))
    return (auth_string.concat(test_cookie_testing.get('Authorization')))
  }

  delete_item_cart(product_name_delete,manufacturer_name)
  {
    fetch('http://127.0.0.1:8000/delete_item_cart/',
    {
      method:"POST",
      headers:
      {
      'Content-Type':"application/json",
      "Accept":"application/json",
      "Authorization":this.sample_cookie_output()
    },
      body:JSON.stringify({"product_name":product_name_delete,"manufacturer":manufacturer_name})

  })
  .then(something =>something.json())
  .then(findResponse =>
    {
      console.log(findResponse,typeof(findResponse))
      if((Object.keys(findResponse).length)===1 && (Object.keys(findResponse).includes("Data Deletion")))
      {
        hiding='displayNone';
        console.log(hiding)
        //console.log("A user with this name already exists.")
        this.registeration_notification("The Product has been removed from the cart")
      }
    }
  )
  }

  view_cart_details()
  {
    fetch('http://127.0.0.1:8000/view_cart/',
    {
      method:"GET",
      headers:
      {
        'Content-Type':"application/json",
      "Accept":"application/json",
      "Authorization":this.sample_cookie_output()
    },
  })
.then(something =>something.json())
.then(findResponse =>
  {
    console.log(findResponse)
    this.setState({"item_list":findResponse[0],"total_items_price":findResponse[1]})
  }

)
  }

componentDidMount(){
  this.view_cart_details()
}

render(){
  return (
    <div>
      <App/>
      {this.display_cart()}
      <button onClick={this.delete_item_cart}>Test Button</button>
      <ToastContainer/>
    </div>
  )
}
}

export default View_cart

Upvotes: 1

Views: 434

Answers (3)

Dkhili amine
Dkhili amine

Reputation: 169

Change e param position

product_state(e,product_name,manufacturer)

to 

product_state(product_name,manufacturer,e)

Upvotes: 1

Prakash Sharma
Prakash Sharma

Reputation: 16472

You are passing the e parameter at third place and in the function you are trying to access it from the first parameter. Pass e as first parameter

onChange={(e) => this.product_state(e, this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'])}

Upvotes: 1

Damien
Damien

Reputation: 307

Try this

<button onClick={(e) => this.delete_item_cart(e)}>Test Button</button>

Upvotes: 1

Related Questions