react-review.js

import React, { PureComponent } from 'react'
import PropTypes            from 'prop-types'
import { connect }          from 'react-redux'

class Parent extends PureComponent {
  handleUserClick(user) {
    alert(`Hello I am ${user.name}`)
  }

  render() { return null }
}

class Child extends Parent {
  static propTypes = {
    handleUserClick: PropTypes.func.isRequired
  }

  constructor(props) {
    this.state = {
      users: props.users,
      flag: false
    }
  }

  componentWillMount() {
    const { filterClientInput } = this.refs
    const { users } = this.state

    window.addEventListener('scroll', (e)=>console.log(e.target))
    filterClientInput.focus()
    if (users.length > 0) {
      this.setState(Object.assign({ flag: true }, this.state))
    }
  }

  handleChangeSearchInput(e) {
    console.log(e.target.value)
  }

  render() {
    const { handleUserClick } = this
    const { users } = this.state

    return (
      {
        flag &&
          <div className="page-wrapper">
            <input
              name={'search-input'}
              ref="filterClientInput"
              onChange={this.handleChangeSearchInput(e)}
            />
            <div>
              {
                users.map(user =>
                  <div
                    className="user-wrapper"
                    onClick={handleUserClick(user)}
                  >
                    <div className="user-name">
                      {user.name}
                    </div>
                    <div className="user-photo">
                      {user.photo}
                    </div>
                  </div>
                )
              }
            </div>
          </div>
      }
    )
  }
}

const mapStateToProps = state => ({ users: state.users })

export default connect()(Child)