alicantorun

Group Array of JavaScript Objects by Key or Property Value

Implementation

const groupBy = key => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;

alicantorun

require('dotenv').config()

const express = require('express')
const app = express()
const mongoose = require('mongoose')

mongoose.connect(process.env.DATABASE_URL, { useNewUrlParser: true })
const db = mongoose.connection
db.on('error', (error) => console.error(error))
db.once('open', () => console.log('Connected to Database'))

alicantorun

import React, { useState } from "react";

const MyComponent = () => {
  const [value, setValue] = useState("");

  return <input value={value} onChange={e => setValue(e.target.value)} />;
};

export default MyComponent;

alicantorun

import React, { useState } from "react";

const MyComponent = () => {
  const inputState = useState("");

  return <input value={inputState[0]} onChange={e => inputState[1](e.target.value)} />;
};

export default MyComponent;

alicantorun

import React, { useState } from 'react';

const MyComponent = () => {
  const [firstname, setFirstname] = useState('');
  const [lastname, setLastname] = useState('');

  return (
    <>
      <input value={firstname} onChange={e => setFirstname(e.target.value)} />
      <input value={lastname} onChange={e => setLastname(e.target.value)} />

alicantorun

import React, { useState } from "react";

function App() {
  const [data, setData] = useState([]);

  return (
      <ul>
        {data.map(el => (
          <li key={el.id}>
            <h3>{el.name}</h3>

alicantorun

import React, { useState, useEffect } from "react"; // first, we've imported useEffect from react

function App() {
  const [data, setData] = useState([]);             

  const fetchData = async () => {                   // second, we' ve defined our fetchData function
      let response = await fetch("https://jsonplaceholder.typicode.com/users/");
      let responseData = await response.json();
      setData(responseData);                        // third, we used setData to set out local state inside fetchData function
    };

alicantorun

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState([]);
  const [enteredFilter, setEnteredFilter] = useState("");     // second, we create a new useState Hook for our filter

  useEffect(() => {
    const fetchData = async () => {
      let response = await fetch("https://jsonplaceholder.typicode.com/users/");
      let responseData = await response.json();

alicantorun

import React, { useState, useEffect, useRef } from "react";                      // first, we import useRef from react

function App() {
  const [data, setData] = useState([]);
  const [enteredFilter, setEnteredFilter] = useState("");
  const inputRef = useRef();                                                     // second, we initialize a variable by useRef

  const fetchData = async () => {
    let response = await fetch("https://jsonplaceholder.typicode.com/users/");
    let responseData = await response.json();

alicantorun

import React, { useState, useEffect, useRef } from "react";

function App() {
  const [data, setData] = useState([]);
  const [enteredFilter, setEnteredFilter] = useState("");
  const inputRef = useRef();

  const fetchData = async () => {
    let response = await fetch("https://jsonplaceholder.typicode.com/users/");
    let responseData = await response.json();