+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Javascript allgemeiner (https://javascript-forum.de/forumdisplay.php?fid=16)
+--- Forum: React (https://javascript-forum.de/forumdisplay.php?fid=19)
+--- Thema: ein Object mit react in einem anderen div anwenden (/showthread.php?tid=2318)
ein Object mit react in einem anderen div anwenden - sfthbara - 20.04.2023
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>
);
}
RE: ein Object mit react in einem anderen div anwenden - rzscout - 20.04.2023
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