import React, { Component } from "react";
import CardList from "../components/CardList/CardLists";
import SearchBox from "../components/SearchBox/SearchBox";
import Scroll from "../components/Scroll";
import "./App.css";
class App extends Component {
constructor() {
super();
this.state = {
robots: [],
searchfield: "",
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((users) => {this.setState({ robots: users })});
}
onSearchChange = (event) => {
this.setState({ searchfield: event.target.value });
};
render() {
const { robots, searchfield } = this.state;
const filteredRobots = robots.filter((robot) => {
return robot.name.toLowerCase().includes(searchfield.toLowerCase());
});
return !robots.length ? (
<h1>Loading</h1>
) : (
<div className="App">
<h1>Cat Friends</h1>
<SearchBox searchChange={this.onSearchChange} />
<Scroll>
<CardList robots={filteredRobots} />
</Scroll>
</div>
);
}
}
export default App;
import React, { useState, useEffect } from "react";
import CardList from "../components/CardList/CardLists";
import SearchBox from "../components/SearchBox/SearchBox";
import Scroll from "../components/Scroll";
import "./App.css";
function App() {
const [robots, setRobots] = useState([]);
const [searchfield, setSearchfield] = useState("");
useEffect(() => {
// Update the document title using the browser API
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((users) => {setRobots(users)});
}, []);
const onSearchChange = (event) => {
setSearchfield(event.target.value);
};
const filteredRobots = robots.filter((robot) => {
return robot.name.toLowerCase().includes(searchfield.toLowerCase());
});
return !robots.length ? (
<h1>Loading</h1>
) : (
<div className="App">
<h1>Cat Friends</h1>
<SearchBox searchChange={onSearchChange} />
<Scroll>
<CardList robots={filteredRobots} />
</Scroll>
</div>
);
}
export default App;
