jokamjohn

toggleItemEditing = index => {
 this.setState({
   items: this.state.items.map((item, itemIndex) => {
     if (itemIndex === index) {
       return {
         ...item,
         isEditing: !item.isEditing
       }
     }
     return item;

jokamjohn

addItem = event => {
  event.preventDefault();
  const {name, price} = this.state;
  const itemsInState = this.state.items;
  const itemsArrayLength = itemsInState.length;
  const id = itemsArrayLength 
             ?
             (itemsInState[itemsArrayLength - 1].id + 1) 
             : 
             1;

jokamjohn

import React from 'react';
import PropTypes from 'prop-types';

export const AddItem = ({name, price, onChange}) => (
 <div className="row justify-content-center">
   <form className="form-inline">
     <input
       type="text"
       className="form-control mb-2 mr-sm-2"
       placeholder="Item"

jokamjohn

handleInputChange = event => {
 const target = event.target;
 const value = target.value;
 const name = target.name;
 this.setState({
   [name]: value
 });
};

jokamjohn

import React from 'react';
import PropTypes from 'prop-types';

export const AddItem = ({name, price}) => (
 <div className="row justify-content-center">
   <form className="form-inline">
     <input
       type="text"
       className="form-control mb-2 mr-sm-2"
       placeholder="Item"

jokamjohn

AddItem.propTypes = {
 name: PropTypes.string.isRequired,
 price: PropTypes.string.isRequired,
};

jokamjohn

const {name, price} = this.state;
<AddItem
   name={name}
   price={price}
/>

jokamjohn

onSubmit = event => {
 event.preventDefault();
 const name = this.name.value;
 const age = this.age.value;
 const info = {name: name, age: age};
 const data = [...this.state.data, info];
 this.setState({
   data: data
 });
};

jokamjohn

onSubmit = event => {
 event.preventDefault();
 const name = this.name.value;
 const age = this.age.value;
 const info = {name: name, age: age};
 const data = this.state.data;
 data.push(info);
 this.setState({
   data: data
 });

jokamjohn

<form className="form-inline">
 <input
     type="text"
     className="form-control mb-2 mr-sm-2 mb-sm-0"
     placeholder="Name"
     ref={input => this.name = input}/>
 <div className="input-group mb-2 mr-sm-2 mb-sm-0">
   <input
     type="text"
     className="form-control"