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, push, pull }) => (        
      
          
       
                    {
    list.map(name => (              
                         pull(n => n === name)}                />                {name}                          ))}          
       
          
        push(random.first())}          >            Add Random Name                  
      
      )}    
       );}render(
     , document.getElementById("root"));