JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div class="app"></div>

Babel + JSX

const Table = ({ removeClickHandler, changeClickHandler, items }) => (
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {items.map(n => (
        <tr key={n.id}>
          <td>{n.name}</td>
          <td>{n.phone}</td>
          <td>
            <button onClick={() => removeClickHandler(n.id)}>REMOVE</button>
            <button onClick={() => changeClickHandler(n)}>CHANGE</button>
          </td>
        </tr>
      ))}
    </tbody>
  </table>
);

const Form = ({ data, onInputHandler, onClickHandler }) => (
  <form>
    <input 
      type="text"
      name="name"
      value={data.name}
      onChange={onInputHandler}
      placeholder={data.id ? '' : 'Type a name...'}
    />
    <input 
      type="text"
      name="phone"
      value={data.phone}
      onChange={onInputHandler}
      placeholder={data.id ? '' : 'Type a phone...'}
    />
    <input 
      value={data.id ? 'SAVE CHANGES' : 'ADD'}
      type="submit"
      onClick={onClickHandler}
    />
  </form>
);

class App extends React.Component {
  state = {
    items: [
      { name:    'John', phone: '+7(915)5554522' },
      { name:  'Chinda', phone: '+7(915)5552565' },
      { name:    'Mike', phone: '+7(915)6546546' },
      { name:    'Lara', phone: '+7(915)8793453' },
      { name: 'Borines', phone: '+7(915)6456325' },
      { name:   'Maria', phone: '+7(915)8673453' },
    ].map(n => (n.id = getID(), n)),
    newItem: {},
  }

  onClickHandler = e => {
    e.preventDefault();

    if (!this.state.newItem.name || !this.state.newItem.phone) {
      return;
    }

    this.setState(({ items, newItem }) => ({
      items: newItem.id
        ? items.map(n => n.id === newItem.id
            ? { ...n, ...newItem }
            : n
          )
        : [ ...items, { id: getID(), ...newItem } ],
      newItem: {
        name: '',
        phone: '',
      },
    }));
  }

  onInputHandler = ({ target: { value,...