score:0

Accepted answer
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
        }
    }

    /* Add this life cycle hook, it replaces filter(). Props are updated/incoming 
       props, state is current state of component instance */
    static getDerivedStateFromProps(props, state) {

        // The condition for prop changes that trigger an update
        if(state.input !== props.inputValue) {

            const filtered = state.allUsers.filter(user => user.toLowerCase().includes(props.inputValue));

            /* Return the new state object seeing props triggered an update */
            return {
                allUsers: state.allUsers
                filteredUsers: filtered.map(user => <li key={user}>{user}</li>),
                input: props.inputValue
            }
        }

        /* No update needed */
        return null;
    }

    render() {

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

Related Query

More Query from same tag