Wczorajszy problem w końcu rozwiązałem to standardowo pojawia się kolejny. Próbuję zaimplementować wyszukiwarkę, która będzie szukała na podstawie nazwy, z tablicy obiektów. Nic nie wpisane to wyświetla wszystko, coś wpisujemy to na bieżąco aktualizuje render, jak nic nie znajdzie to renderuje No results!. Dopiero się uczę i nie wiem czemu nie działa mi taka wyszukiwarka jak napisałem. Nie kompiluje nawet, bo nie rozumie event. Kombinowałem tam także, coś ze statem, ale za nic mi nie wychodziło. Pomożecie coś? ;)
class Container extends Component {
state = {
servers: [],
activeMenu: [],
};
componentDidMount() {
fetch('http://localhost:4454/servers')
.then(response => response.json())
.then(data => {
this.setState ({
servers: data,
activeMenu: []
})
})
.catch(error => console.log(error))
}
menuEnter = (serverId) => {
this.setState({activeMenu: serverId});
};
menuExit = (serverId) => {
this.setState({activeMenu: !serverId});
};
filterServers = (serverName) => {
var updatedList = this.state.servers.name;
updatedList = updatedList.filter(function (item) {
return item.toLowerCase().search(event.target.value.toLowerCase()) !== -1;
});
this.setState({servers: updatedList})
};
turnOn = () => {
console.log('działa')
};
render() {
return(
<div className="prostok-t-1">
<section className='grupa-1'>
<div className='title'>
<input onInput={this.filterServers} className='form' type="search" placeholder='Search'/>
<h2 className='servers'>Servers</h2>
<h3 className='number-of-elements-16'>Numbers of elements: 16</h3>
</div>
<div className='prostok-t-4'>
<div className='place'>
<div className="name">
<h3>Name</h3>
</div>
<div className="condition">
<h3>Status</h3>
</div>
</div>
<div>{this.state.servers.map((server) => {
if (server.name.length > 0) {
return (
<div className="server" key={server.id}>
<p className="area">{server.name}</p>
<p className="status">{server.status}</p>
<img onMouseOver={() => this.menuEnter(server.id)}
onClick={() => this.menuExit(server.id)} className='menu' src={menu}
alt="menu"/>
<ul className={classNames({
submenu: true,
active: server.id === this.state.activeMenu
})}>
<li onClick={this.turnOn}>Turn on</li>
<li>Turn off</li>
<li>Reboot</li>
</ul>
</div>
)
}
return (
<p>No results!</p>
)
})}
</div>
</div>
</section>
</div>
)
}
}
export default Container;