[React] Refactor a Stateful List Component to a Functional Component with React PowerPlug

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"));

原文地址:https://www.cnblogs.com/Answer1215/p/8390358.html

时间: 2024-10-09 08:30:09

[React] Refactor a Stateful List Component to a Functional Component with React PowerPlug的相关文章

[React] Return a list of elements from a functional component in React

We sometimes just want to return a couple of elements next to one another from a React functional component, without adding a wrapper component which only purpose would be to wrap elements that we want to render. In this one minute lesson we are goin

[React] Creating a Stateless Functional Component

Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these compon

React Native Android原生模块开发实战|教程|心得|如何创建React Native Android原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看iOS篇的点这里<React Native iOS原生模块开发>). 我平时在用React Native开发App时会

[Vue warn]: Attribute &quot;id&quot; is ignored on component &lt;div&gt; because the component is a fragment instanc

今天在使用vue框架搭建环境时,遇到这个错误提示: [Vue warn]: Attribute "id" is ignored on component <div> because the component is a fragment instanc 这个提示的原因是使用 vue-router 和 vue-loader 插件的时候在最外面那个 template 里面,所有内容的外面没有使用一个div包起来. 如果没有使用div或者其他的元素包起来,vue-router 跳

React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息.为大家精心准备的React Native视频教程公布了,大家现能够看视频学React Native了. 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得.来分享给大家,但实在抽不开身.今天看了一下日历发现立即就春节了.所以就赶在春节之前将这篇博文写好并公布(事实上是两篇

vue报错:[Vue warn]: Attribute &quot;id&quot; is ignored on component &lt;div&gt; because the component is a fragment instance

[Vue warn]: Attribute "id" is ignored on component <div> because the component is a fragment instance 今天自己做一个vue小项目的时候,老是报这个错误,百度之后解释是只能有一个最顶级的父元素,但是我最外层只用了一个div 出现fragment instance有多种情况: Template contains multiple top-level elements. (模版包

[React] Refactor a Class Component with React hooks to a Function

We have a render prop based class component that allows us to make a GraphQL request with a given query string and variables and uses a GitHub graphql client that is in React context to make the request. Let's refactor this to a function component th

[React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component

In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the keypr

[React + GraphQL] Use useLazyQuery to manually execute a query with Apollo React Hooks

When using useQuery from Apollo React Hooks, the request will be sent automatically after the component has been mounted. This might not be the desired behaviour as we might want to send the request in response to user action (for instance, after a b