Yam Code

New Paste Browse

import React , { useState, useEffect } from 'react';
import './components/card-list/card-list.component';
import './App.css';
import { CardList } from './components/card-list/card-list.component';
import {SearchBox} from './components/search-box/search-box.component';

const App = () => {
  const [monsters, setMonsters] = useState([]);
  const [searchField, setSearchField] = useState('');

useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => setMonsters(users))
  });

const handleChange = e => {
    setSearchField(e.target.value);
  };

const filterMonster = monsters.filter(
    monster => monster.name.toLowerCase().includes(searchField.toLowerCase()
  ));

return (
    <div className="App">
        <h1> Monster Rolodex </h1>
        <SearchBox 
          placeholder='Search monster'
          handleChange = {handleChange}
        />
        <CardList monsters={filterMonster} />
    </div>
  );
};

export default App;

Paste Settings

Paste Title : [Optional]

Paste Folder : [Optional]

Syntax Highlighting : [Optional]

Paste Expiration : [Optional]

Paste Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Paste Settings

Site Languages