This app is supposed to filter words by a specific input. I want to call a function with `setState()` when rendering a component and technically it's working but there is warning in the console. 

> 
> Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
> 
> 
> 

I guess that this is because I'm calling the function in the render function which I shouldn't, but what should I do instead? 

```
class UsersList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      allUsers: ["Michał", "Ania", "Kasia", "Tomek", "Hubert", "Jan", "Martyna", "Rafał", "Bartłomiej"],
      filteredUsers: [],
      input: null
    }
  }

  filter() {
    if (this.state.input !== this.props.inputValue) {
      const filtered = this.state.allUsers.filter(user => user.toLowerCase().includes(this.props.inputValue));
      this.setState({
        filteredUsers: filtered.map(user => <li key={user}>{user}</li>),
        input: this.props.inputValue
      })
    }

    return this.state.filteredUsers;
  }

  render() {
    this.filter()
    return (
      <ul>
        {this.state.filteredUsers}
      </ul>
    )
  }
}

class App extends React.Component {

  constructor() {
    super();

    this.state = {input: ""};
    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(e) {
    this.setState({input: e.target.value})
  }

  render() {
    return (
      <div>
        <input onChange={this.handleInput} type="search"/>
        <UsersList inputValue={this.state.input} />
      </div>
    );
  }
}

```