In this lesson we‘ll look at React PowerPlug‘s <List />
component by refactoring a normal class component with state and handlers to a functional component powered by React PowerPlug.
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"));