import React from "react";

import { render } from "react-dom";

import random from "random-name";

import { List } from "react-powerplug";

function MyList() {

  return (

    <List initial={["Jago", "Cinder", "Glacius", "Riptor"]}>

      {({ list, push, pull }) => (

        <div>

          <div className="block">

            {list.map(name => (

              <span

                key={name}

                className="tag is-link"

                style={{ marginRight: 10 }}

              >

                <button

                  className="delete is-small"

                  style={{ marginRight: 5 }}

                  onClick={() => pull(n => n === name)}

                />

                {name}

              </span>

            ))}

          </div>

          <button

            className="button is-success"

            onClick={() => push(random.first())}

          >

            Add Random Name

          </button>

        </div>

      )}

    </List>

  );

}

render(<MyList />, document.getElementById("root"));