diff options
author | 2019-02-25 02:17:19 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | d64fc4be0130b7dfb91fdb3e05fccad380253abc (patch) | |
tree | b1e21b2cb555e1415908eab980cc44d0d1eeb0fc /vnext/src | |
parent | a5fbeabe6af6888cb22b6733f31f8f0ba4aa0c29 (diff) |
Users using hooks
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/Users.js | 42 |
1 files changed, 15 insertions, 27 deletions
diff --git a/vnext/src/components/Users.js b/vnext/src/components/Users.js index 2bab6de1..522aaa30 100644 --- a/vnext/src/components/Users.js +++ b/vnext/src/components/Users.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; @@ -14,32 +14,20 @@ export function Readers({ user, ...rest }) { return <Users user={user} prop='readers' />; } -class Users extends React.Component { - constructor(props) { - super(props); - this.state = { - user: {} - }; - } - updateUser = (user) => { - this.setState({ - user: user - }); - } - render() { - return ( - <UserInfo user={this.props.user} onUpdate={this.updateUser}> - <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row'}}> - { - this.state.user[this.props.prop] && - this.state.user[this.props.prop].map(user => - <Avatar key={user.uid} user={user} /> - ) - } - </div> - </UserInfo> - ); - } +function Users(props) { + const [user, setUser] = useState(props.user); + return ( + <UserInfo user={user} onUpdate={setUser}> + <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}> + { + user[props.prop] && + user[props.prop].map(user => + <Avatar key={user.uid} user={user} /> + ) + } + </div> + </UserInfo> + ); } |