Patterns for deriving state gist2

code.js

class SortedList extends React.Component {
    
    onFilterChange = (event)=>{
        const filter = event.target.value;
        this.setState({
            filter,
        })
    }
    sortByKey = (column) =>{
        this.setState({
            sortKey:column
        })
    }
    sortList(){
        const {list} = this.props;
        const {filter,sortKey} = this.state;
        const filteredList = list.filter(item=>item.text.indexOf(filter)>=0)
        return list.sort((a,b)=>a[column]>b[column]?1:a[column] < b[column]?-1:0)
    }
    render(){
        const {filter} = this.props;
        const sortedList = this.sortList();
        return <div>
            {sortedList.map(item=>
                <ItemView item={item} key={item.id} />
            )}
            <button onClick={()=>this.sortByKey("columnA")}>Sort by A</button>
            <button onClick={()=>this.sortByKey("columnB")}>Sort by B</button>
            <input type="text" value={filter} 
                onChange={this.onFilterChange}>Sort by A</button>
        </div>
    }
}