ReactJS - Adding an Input field with each element and get value from it

Question

I am making an "Add to Cart" Functionality. My code is as follows :

import React, { Component } from 'react';
import Items from '../json/items.json';

class AddToCart extends Component {

    putInCart(i) {
        // **** I WANT TO GET THE QUANTITY IN THIS FUNCTION ****
    }

    render() {

        return (
            <div>
                {
                    Items.items.map((val, ind) => {
                        return (
                            <div>
                                <p>Name : {val.name}</p>
                                <p>Price : {val.price}</p>
                                <p>Availability : {val.availability}</p>
                                <input placeholder="Quantity"></input>
                                <br />
                                <button onClick={() => this.putInCart(ind)}>Add to Cart</button>
                                <br /><br /><br />
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}

export default AddToCart;

I want to get the quantity which the user types in the quantity text field in my "putInCart()" method when the user clicks the "add to cart" button. But I can't figure out how to do that. Any help would be appreciated.

JSON File :-

    {
     "items": [
       {
        "name": "Item 1",
        "price": "100",
        "availability": "In Stock",
       },
       {
        "name": "Item 2",
        "price": "50",
        "availability": "Out of Stock",
      },
      {
        "name": "Item 3",
        "price": "150",
        "availability": "In Stock",
      }
    ]
   }

See reactjs.org/docs/state-and-lifecycle.html

lissettdm
– lissettdm

2020-11-25 14:44:26 +00:00
Commented Nov 25, 2020 at 14:44 — lissettdm
– lissettdm, Commented Nov 25, 2020 at 14:44

VersifiXion · Accepted Answer · 2020-11-25 15:19:31Z

1

You need to store the quantity written by the user in a property of the state of the component,

Create a state with an initial empty string
Bind the input value to this state property
On every value change, you update the state value
Now you can get the state value everywhere you want in the component

src/App.js

import React, { Component } from "react";
import "./styles.css";
import Items from './items';

class AddToCart extends Component {
   constructor(props) {
     super(props);
     this.state = {
       1: "",
       2: "",
       3: ""
     };
     this.handleChange = this.handleChange.bind(this);
   }

    handleChange(e) {
      this.setState({ [e.target.name]: e.target.value });
    }


    putInCart(i) {
      console.log(this.state[i]);
    }

    render() {
        return (
            <div>
                {
                    Items.map((val, ind) => {
                        return (
                            <div key={ind}>
                                <p>Name : {val.name}</p>
                                <p>Price : {val.price}</p>
                                <p>Availability : {val.availability}</p>
                                <input placeholder="Quantity" name={ind} onChange={this.handleChange} value={this.state.inputValue}></input>
                                <br />
                                <button onClick={() => this.putInCart(ind)}>Add to Cart</button>
                                <br /><br /><br />
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}

export default AddToCart;

src/items.js

export default [
    {
      "name": "Item 1",
      "price": "100",
      "availability": "In Stock",
    },
    {
      "name": "Item 2",
      "price": "50",
      "availability": "Out of Stock",
    },
    {
      "name": "Item 3",
      "price": "150",
      "availability": "In Stock",
    }
]

edited Nov 25, 2020 at 15:19

answered Nov 25, 2020 at 14:45

VersifiXion

2,2927 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

TheoWckr Over a year ago

With this solution you can't have multiple values in items. All the input will be bind to the same value

VersifiXion Over a year ago

I did some edits, but in the val of Items.items , is there a unique property to differentiate it from others ? For now I use the "ind" to put it as the name of input, and then in the this.setState I use e.target.name

VersifiXion Over a year ago

ok and in putInCart function, which input value do you need to get

Niko Bellic Over a year ago

The <input> tag value inside the map function.

VersifiXion Over a year ago

Ok I made some final changes, it can be ok for now, tell me if sometihng is not wrong

|

Collectives™ on Stack Overflow

ReactJS - Adding an Input field with each element and get value from it

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related