muuri-react | The layout engine for React | Grid library

/* React */
import React, { useState, useCallback } from "react";
import "./styles.css";
import { MuuriComponent } from "muuri-react";

// App.
const App = () => {
  // Items state.`enter code here`
  const [projects] = useState([
    {
      key: 1,
      category: "javascript",
      ProjectName: "contador"
    },
    {
      key: 2,
      category: "javascript",
      ProjectName: "contador"
    },
    {
      key: 3,
      category: "javascript",
      ProjectName: "contador"
    },
    {
      key: 4,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 5,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 6,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 7,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 8,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 9,
      category: "node",
      ProjectName: "contador"
    },
    {
      key: 10,
      category: "node",
      ProjectName: "contador"
    },
    {
      key: 11,
      category: "javascript",
      ProjectName: "contador"
    }
  ]);

  // Filter state.
  const [filter, setFilter] = useState({
    value: "all"
  });

  // Filter method.
  const filterFunction = useCallback(
    function (data) {
      var isFilterMatch =
        filter.value === "all" ? true : data.category === filter.value;
      return isFilterMatch;
    },
    [filter.value]
  );

  // Children.
  const children = projects.map(({ key, category }) => (
    
  ));

  return (
    
      {/* Header */}

       setFilter({ ...filter, value: e.target.value })}
      />

       ({ category })}
        filter={filterFunction}
      >
        {children}
      
    
  );
};

// Item component.
const Item = ({ category }) => {
  return (
    
      
        
          {category}
        
      
    
  );
};
const Select = ({ values, onChange }) => {
  return (
    
      
        
      
      
        
      
      
        {values.map((value, i) => (
          
            {value}
          
        ))}
      
    
  );
};
export default App;