codewithbernard

.article {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.picture {
    object-fit: cover;
    width: 100%;
    height: 100%;

codewithbernard

import styles from "./Image.module.css";

import background from "../../assets/img/background.png";

const Image = () => {
  return (
    <article className={styles.article}>
      <img className={styles.image} src={background} alt="background" />
      <h1 className={styles.header}>React Is Awesome</h1>
    </article>

codewithbernard

.article {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: grid;
    place-items: center;
}

.header {

codewithbernard

import styles from "./Background.module.css";

import background from "../../assets/img/background.png";

const Background = () => {
  return (
    <article
      className={styles.article}
      style={{ backgroundImage: `url(${background})` }}
    >

codewithbernard

import uniq from "lodash/uniq";

const users = ["Aaron", "John", "Mary", "John", "Angel", "Mary"];

const Users = () => {
  return (
    <div>
      <strong>Unique names</strong>
      <ul>
        {uniq(users).map((user) => (

codewithbernard

import { useState, useCallback } from "react";
import debounce from "lodash/debounce";

const Input = () => {
  const [inputValue, setInputValue] = useState("");

  const sendQuery = (query) => {
    // Call API with query parameter here
    console.log(query);
  };

codewithbernard

const users = [
  { name: "John", age: 24 },
  { name: "Linda", age: 19 },
  { name: "Josh", age: 33 }
];

function App () {
  return (
    <div className="App">
      {users

codewithbernard

const users = [
  { name: "John", age: 24 },
  { name: "Linda", age: 19 },
  { name: "Josh", age: 33 }
];

function App() {
  return (
    <div className="App">
      <ul>

codewithbernard

const users = [
  { name: "John", age: 24 },
  { name: "Linda", age: 19 },
  { name: "Josh", age: 33 }
];

function App() {
  
  const renderUsers = () => {
    const result = [];

codewithbernard

const users = [
  { name: "John", age: 24 },
  { name: "Linda", age: 19 },
  { name: "Josh", age: 33 }
];

function App() {
  const renderUsers = () => {
    const result = [];
    for (const userIndex in users) {