Antono__88

как вернуть к первоначальному состоянию когда unchecked не понимаю

Очевидно, устанавливать в качестве результата фильтрации не его текущее значение, а полные данные.

Ну и ещё неплохо бы сделать так, чтобы фильтрация по введённой строке не отменяла фильтрацию по чекбоксу - унесите их в один общий эффект, чтобы они работали совместно:

function Posts() {
  const [ posts, setPosts ] = useState([]);
  const [ filteredPosts, setFilteredPosts ] = useState([]);
  const [ search, setSearch ] = useState('');
  const [ checkbox, setCheckbox ] = useState(false);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(r => setPosts(r.data));
  }, []);

  useEffect(() => {
    let filtered = posts;

    if (search) {
      const s = search.toLowerCase();
      filtered = filtered.filter(n => n.title.toLowerCase().includes(s));
    }

    if (checkbox) {
      filtered = filtered.filter(n => n.userId === 10);
    }

    setFilteredPosts(filtered);
  }, [ posts, search, checkbox ]);

  return (
    <>
      <input
        type="text"
        placeholder="Search for article..."
        value={search}
        onChange={e => setSearch(e.target.value)}
      />
      <label>
        User Id 10
        <input
          type="checkbox"
          checked={checkbox}
          onChange={e => setCheckbox(e.target.checked)}
        />
      </label>

      <ul>
        {filteredPosts.map(n => (
          <li key={n.id}>
            <div>{n.userId}</div>
            <div>{n.title}</div>
            <div>{n.body}</div>
          </li>
        ))}
      </ul>
    </>
  );
}

import { useRef } from "react";

const Item = ({ element, renderIn }) => {
  const node = useRef(null);

  const chooseThis = (event) => {
    renderIn.current.appendChild(node.current);
  };

  return (
    <li onClick={chooseThis}>
      <h1 ref={node}>{element}</h1>
    </li>
  );
};

const List = ({ elements, renderIn }) => (
  <ul>
    {elements.map((element) => (
      <Item element={element} renderIn={renderIn} />
    ))}
  </ul>
);

const App = () => {
  const elements = ["one", "two", "three"];
  const renderIn = useRef(null);

  return (
    <>
      <h1>
        Chosen one: <div style={{ color: "red" }} ref={renderIn}></div>
      </h1>
      <List elements={elements} renderIn={renderIn} />
    </>
  );
};
export default App;

elements - массив строк, элементы для отрисовки
renderIn - реф на ноду в которой будем отрисовывать выбранный элемент
List - ul который рендерит Item для каждого элемента из elements, принимает renderIn реф чтобы прокинуть его в Item
Item - li в котором создаётся h1 с содержимым элемента, внутри него инициализируется реф на h1, когда мы кликаем на li средствами DOM’а в ноду на которую указывает renderIn добавляется соответствующий h1 (для большей наглядности у блока в котором все рендерится в стилях color: ‘red’, он и применяется чилдренам)