ItemEditing.js

<div className="card-body">
 {item.isEditing
     ?
     <div className="mb-4">
       <input
           type="text"
           name="name"
           className="form-control mb-2 mr-sm-2"
           placeholder="Item"
           value={item.name}
           required
       />
       <input
           type="number"
           name="price"
           className="form-control"
           placeholder="Price"
           value={item.price}
           required
       />
     </div>
     :
     <div>
       <h4 className="card-title text-center">
         {item.name}
       </h4>
       <div className="row justify-content-center mb-4">
         <p className="card-text">
           <span className="badge badge-secondary py-2 mr-5">Price</span>
           <span>${item.price}</span>
         </p>
       </div>
     </div>
 }

 <div className="row justify-content-center">
   <div>
     <button
         type="button"
         className="btn btn-primary mr-2"
         onClick={toggleEditing}>
       {item.isEditing ? "Save" : "Edit"}
     </button>
     <button
         type="button"
         className="btn btn-primary">
       Delete
     </button>
   </div>
 </div>
</div>