Реагировать: отображать отфильтрованные элементы массива на основе события клика

Выход приложения:

Вы должны установить состояние следующим образом:

<button onClick = {() => setTech('React')}>React</button>
<button onClick = {() => setTech('HTML')}>HTML</button>

полный рабочий код приложения:

import React, { useState, useEffect } from "react";
import Axios from "axios";
import "./style.css";

import React from "react";
const projects = [
  {
    name: "Poject 1",
    technologies: ["React", "Gatsby"]
  },
  {
    name: "Project 2",
    technologies: ["HTML", "Node.js"]
  },
  {
    name: "Project 3",
    technologies: ["React", "Node.js"]
  },
  {
    name: "Project 4",
    technologies: ["HTML", "CSS"]
  }
];

const App = () => {
  const [tech, setTech] = useState("");

  const filteredProjects =
    tech === ""
      ? projects
      : projects.filter(project => project.technologies.includes(tech));

  return (
    <>
      <button onClick = {() => setTech("")}>All</button>
      <button onClick = {() => setTech("React")}>React</button>
      <button onClick = {() => setTech("HTML")}>HTML</button>

      {filteredProjects.map(function(filteredProject) {
        return <div>{filteredProject.name}</div>;
      })}
    </>
  );
};

export default App;

живое рабочее приложение: stackblitz

Я действительно думаю, что единственная проблема, с которой вы столкнулись, это то, что ваши функции настройки состояния вызываются неправильно. Это должно быть так:

<button onClick = {() => setTech('React')}>React</button>
<button onClick = {() => setTech('HTML')}>HTML</button>

В настоящее время вы устанавливаете tech либо на true, либо на false (результат операций сравнения идентификаторов)!