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",
      }
    ]
   }

Answer 1

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

1. Create a state with an initial empty string
2. Bind the input value to this state property
3. On every value change, you update the state value
4. 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",
    }
]