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>
  );
}

[rzscout]

Hi sfthbara,
wenn du einen Thread eröffnest und Code einfügst dann bitte die Textoption Code einfügen verwenden. Es ist nämlich schwierig das zu lesen, da du den Code direkt als Text eingefügt hast. Zwar erkennt zum Teil des Forums die Formatierung, aber um es leserlich zu gestalten, solltest du es als Code einfügen.

Ich werde mir das mal genauer anschauen.

Viele Grüße

rzscout