Patterns for deriving state gist11

code.js

function sortedList(props){
    const {list) = props;
    const [filter, setFilter] =  useState("");
    const [sortKey, setSortKey] = useState(null);
   
    const filteredList = list.filter(item=>item.text.indexOf(filter)>=0)
    const sortedList = list.sort((a,b)=>a[column]>b[column]?1:a[column] < b[column]?-1:0);
    return <div>
        {sortedList.map(item=>
            <ItemView item={item} key={item.id} />
        )}
        <button onClick={()=>setSortKey("columnA")}>Sort by A</button>
        <button onClick={()=>setSortKey("columnB")}>Sort by B</button>
        <input type="text" value={filter} 
            onChange={setFilter}>Sort by A</button>
    </div>    
}