Vytvoříme novou třídu, které rozšiřuje komponent. Do funkce konstruktor přidáme funkci super() a nastaví state na (liked: false). dále navážeme funkci handleClick() na náš komponent. Funkce handleClick získá hodnotu z objektu this.state (false). Následně ve funkci render vytvoříme konstantu text. zde použitý zkrácený zápis je možné zapsat takto:
Dále pak definujeme prom libraries (1), která získá položky z JSON objektu . Metoda trim() ořeže string a metoda toLowerCase. Následně vyfiltrujeme položky pomocí metody filter(). Zbytek kódu vrátí výsledek.
render() { var libraries =this.props.items, searchString =this.state.searchString.trim().toLowerCase(); if (searchString.length>0) { // We are searching. Filter the results. libraries =libraries.filter(function(l) { returnl.name.toLowerCase().match( searchString); }); } return (<div >< input type ="text" value = { this.state.searchString } onChange = { this.handleChange } placeholder ="Type here"/>< ul > { libraries.map(function(l) { return( <li > { l.name } < a href = { l.url} > {l.url} </a></li > } </ul> } </div >; }); };
4
V JSON objektu libraries jsou uložena všechna data ve dvojicích "vlastnost (name) : hodnota (url)"
function search() { // Declare variables var input, filter, ul, li, a, i; input =document.getElementById('myInput'); filter =input.value.toUpperCase(); ul =document.getElementById("myUL"); li =ul.getElementsByTagName('li'); // Loop through all list items, and hide those who don't match the search query for (i =0; i <li.length; i++) { a = li [i] .getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) >-1) { li [i].style.display=""; } else { li[i].style.display="none"; } } }