ein Object mit react in einem anderen div anwenden

[sfthbara]

Also ich verwende on Click in FactList Fact, um per click ein Aside (CategoryFilter erscheinen zu lassen. Im aside ist einfach nur eine Auflistung mit Daten. Dort würde ich gerne den innertext in den spans ändern.
In javascript würde ich das aside element (<p id="demo"> test</p>) aufrufen und (document.getelementbyid("demo").innertext = fact.property) nutzen. Wie sollte man das in React machen? Man könnte auch den key nutzen und diesen mit den den "global" verfügbaren facts vergleichen. Mit props habe ich es auch nicht geschafft, fact in im Aside (CategoryFilter) aufzurufen.



function App() {
  const [showForm, setShowForm] = useState(false);
  const [showAside, setShowAside] = useState(false);
  const [facts, setFacts] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [currentCategory, setCurrentCategory] = useState("all");

  useEffect(
    function () {
      async function getFacts() {
        setIsLoading(true);

        let query = supabase.from("facts").select("*");

        if (currentCategory !== "all")
          query = query.eq("category", currentCategory);

        const { data: facts, error } = await query
          .order("votesInteresting", { ascending: false })
          .limit(1000);

        if (!error) setFacts(facts);
        else alert("There was a problem getting data");
        setIsLoading(false);
      }
      getFacts();
    },
    [currentCategory]
  );

  return (
    <>
      <Header showForm={showForm} setShowForm={setShowForm} />
      {showForm ? (
        <NewFactForm setFacts={setFacts} setShowForm={setShowForm} />
      ) : null}

      <main className="main">
        {showAside ? (
          <CategoryFilter
            factobject={facts}
            setCurrentCategory={setCurrentCategory}
          />
        ) : null}

        {isLoading ? (
          <Loader />
        ) : (
          <FactList
            showAside={showAside}
            setShowAside={setShowAside}
            facts={facts}
            setFacts={setFacts}
          />
        )}
      </main>
    </>
  );
}


function FactList({ facts, setFacts, showAside, setShowAside }) {
  if (facts.length === 0)
    return (
      <p className="message">
        No facts for this category yet! Create the first one ✌️
      </p>
    );

  return (
    <section>
      <ul className="facts-list">
        {facts.map((fact) => (
          <Fact
            key={fact.id}
            showAside={showAside}
            setShowAside={setShowAside}
            fact={fact}
            setFacts={setFacts}
          />
        ))}
      </ul>
      <p>There are {facts.length} facts in the database. Add your own!</p>
    </section>
  );
}

function Fact({ fact, setFacts, showAside, setShowAside }) {
  console.log(fact);
  const [isUpdating, setIsUpdating] = useState(false);
  const [artistt, setArtistt] = useState(null);
  const isDisputed =
    fact.votesInteresting + fact.votesMindblowing < fact.votesFalse;

  async function handleVote(columnName) {
    setIsUpdating(true);
    const { data: updatedFact, error } = await supabase
      .from("facts")
      .update({ [columnName]: fact[columnName] + 1 })
      .eq("id", fact.id)
      .select();
    setIsUpdating(false);

    if (!error)
      setFacts((facts) =>
        facts.map((f) => (f.id === fact.id ? updatedFact[0] : f))
      );
  }

  return (
    <li
      className="fact"
      onClick={() => console.log(fact)}
      onDoubleClick={() => setShowAside((showAside) => !showAside)}
    >
      <div className="fact-info-short">
        {isDisputed ? <span className="disputed">[⛔️ DISPUTED]</span> : null}{" "}
        <p>{fact.artist}</p>
        <span
          className="tag"
          style={{
            backgroundColor: CATEGORIES_ART.find(
              (cat) => cat.name === fact.category
            ).color,
          }}
        >
          {fact.category}
        </span>
        <div className="vote-buttons">
          <button
            onClick={() => handleVote("votesInteresting")}
            disabled={isUpdating}
          >
            👍 {fact.votesInteresting}
          </button>
          <button
            onClick={() => handleVote("votesMindblowing")}
            disabled={isUpdating}
          >
            🤯 {fact.votesMindblowing}
          </button>
          <button
            onClick={() => handleVote("votesFalse")}
            disabled={isUpdating}
          >
            ⛔️ {fact.votesFalse}
          </button>
        </div>
      </div>
    </li>
  );
}