React Input.js COmponent --CART proj

 input.js

import React, { Fragment } from "react";

import classes from './Input.module.css';

const Input=(props)=>{

    return         <div    className={classes.input}>

        <label htmlFor={props.input.id}>{props.label}</label>

        <input {...props.input} />

        </div>

}

export default Input

 {/* {label props.input.id} added as {...props.input}for inp,wit  spread oper auto added type=txt  */}

       

input.module.css

.input {

    display: flex;

    align-items: center;

    margin-bottom: 0.5rem;

  }

 

  .input label {

    font-weight: bold;

    margin-right: 1rem;

  }

 

  .input input {

    width: 3rem;

    border-radius: 5px;

    border: 1px solid #ccc;

    font: inherit;

    padding-left: 0.5rem;

  }

MealItemForm:

 <Input

          label="Amount"

          input={{

            id: "amount_"+props.id,

            type: "number",

            min: "1",

            max: "5",

            step: "1",

            defaultValue: "1",

          }}

        />

        {/* with one {} evaluate js exp, with 2 {{}} sets as obj */}