React: passing data/keys to childs

1.Available Meals:(Result data)

const AvailableMeals = () => {

  const mealsList = DUMMY_MEALS.map((meal) => <MealItem key={meal.id} name={meal.name} description={meal.description} price={meal.price}/>);

2.MealItem: (Row Data)

 <div> <MealItemForm id={props.id}></MealItemForm></div>

3.MealItemForm

const MealItemForm = (props) => {

  return (

    <Fragment>

      <form className={classes.form}>

        <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 */}

        <button>+ Add</button>

      </form>

    </Fragment>

  );

};