React Class Components

import React, { Component } from 'react';

import { SearchBox } from './components/searchbox/searchbox.component';

import './App.css';

class App extends Component {

constructor() {

super(); // calls constructor method on component class

this.state = { // default app values

workers: [],

searchField: '',

};

}

componentDidMount() {

fetch('https://jsonplaceholder.typicode.com/users')

.then((response) => response.json())

.then((users) => this.setState({ workers: users }));

}

onSearchChange = (e) => {

this.setState({ searchField: e.target.value });

};

render() {

const { workers, searchField } = this.state;

const filteredWorkers = workers.filter((worker) =>

worker.name.toLowerCase().includes(searchField.toLowerCase())

);

return (

<div className='App'>

<h1>Workerss List</h1>

<SearchBox

placeholder='search workers'

onSearchChange={this.onSearchChange}

/>

<CardList workers={filteredWorkers} />

</div> // anything in {} is JavaScript expression

);

}

}

export default App;

https://www.w3schools.com/react/react_class.asp

https://reactjs.org/docs/react-component.html

https://reactjs.org/docs/hooks-intro.html