Wie React Icons ausfüllen / Alternative?

In meiner React Component (siehe unten) ist leider das Icon ArrowUpCircleSharp von "react-icons" innen unausgefüllt was nicht schön aussieht wenn es sich über Text und Bilder bewegt, andere Icons wie von FontAwesome Material Icons haben das gleiche Problem. Ich habe es versucht mit den Props Stroke, Fill und mit CSS background, ändert aber nur das Schwarze außen und nicht innerhalb vom Icon.
Was kann ich tun ? Will jetzt nicht umbedingt eine ganze Library einbinden für das Icon, bei react-icons hab ich den Vorteil das es nur die benutzen auch wirklich nutzt,

'use client';
import { useEffect, useState } from "react";
import "../.././assets/styles/components/ScrollToTop/ScrollToTop.scss";
import { IoArrowUpCircleSharp} from "react-icons/io5";


export const ScrollToTop = () => {

const [ScrollY,setScrollY] = useState<number>(0);

useEffect(() => {
    window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))

    return () => {
        window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))
    }
}, [ScrollY])

    return(

        <div
            onClick={()=>{ScrollY > 100 ?
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : 0})
            :
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : document.body.scrollHeight});
            }}
        className={`ScrollToTop ${ScrollY > 100 ? " ScrollToTop_Up" : "ScrollToTop_Down"}`}>
                <IoArrowUpCircleSharp/>
        </div>
    )
}
Bild zum Beitrag
App, HTML, Webseite, programmieren, CSS, JavaScript, Informatik, Programmiersprache, Webentwicklung, Frontend, React, node
Next.js Provider ohne meine ganze App Client Side zu machen?

Als Beispiel wenn ich Redux nutzen möchte muss ich es um einen Provider wickeln und ein YouTuber hatte es mal erklärt wieso daraus dann nicht alle Untergeordneten Components auch automatisch Client Side werden aber ich habe es nicht verstanden wieso das so ist. Was genau passiert da im Hintergrund.

/app/layout.tsx :

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./assets/styles/globals/globals.scss";
import { StoreProvider } from "@/store/StoreProvider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "",
  description: "",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <StoreProvider>
      <html lang="de">
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
        </head>
        <body className={inter.className}>
          {children}
        </body>
      </html>
    </StoreProvider>
  );
}

/app/StoreProvider.tsx :

'use client';
import { store } from "./store";
import { Provider } from "react-redux";

export const StoreProvider = ({ children }
    : { children : React.ReactNode}) => {
    return <Provider store={store}>{children}</Provider>;
}

Denn normlerweise wenn ich "use client" in einer Contact.tsx benutze wird auch "ContactForm.tsx" automatisch use client.

Eigentlich sollte man ja nur einzelne Buttons use client machen wenn möglich damit Contact dennoch ohne JavaScript das erste mal gerendered wird für den Nutzer.

Bin gerade darauf gekommen weil ich das gleiche jetzt nochmal für einen Darkmode Provider mit TailwindCSS machen wollte wie im Video hier https://www.youtube.com/watch?v=7zqI4qMDdg8&ab_channel=DaveGray

Er sagt keine angst eure ganzen Server Components bleiben Server Components nur ich verstehe Sprachlich/Akustisch nicht was er da auf englisch genau meint obwohl ich gut englisch kann.

IT, Webseite, JavaScript, Code, Informatik, Programmiersprache, Webentwicklung, Frontend, TypeScript
Quereinstieg als Frontend Entwickler mit Background in Business Administration fast unmöglich?

Hallo zusammen, ich habe kürzlich meine Weiterbildung als Frontend-Entwickler abgeschlossen und bin nun auf Jobsuche. Trotz des oft berichteten Fachkräftemangels scheint der Markt für Junior-Stellen hart umkämpft zu sein. Meine Bewerbungsunterlagen wurden von der Weiterbildung geprüft, also können sie nicht so schlecht sein.

Ich habe einen B.Sc. in Business Administration und habe vor kurzem meine Weiterbildung zum Frontend-Entwickler abgeschlossen. Ich habe während des Studiums ein Praktikum im Bereich Operations bei einem IT-Startup absolviert und arbeite derzeit wieder dort als Praktikant, diesmal als Frontend-Entwickler. Aus Budgetgründen können sie im Moment keine neuen Mitarbeiter einstellen. Während dieser Zeit plane ich, mich weiter zum Fullstack-Entwickler (TypeScript + React) zu qualifizieren.

Alternativ denke ich darüber nach, ein SAP-Zertifikat zu erwerben, um eine Stelle im SAP-Bereich zu suchen. Hier gibt es wirklich Stellenangebote (Trainee/Junior) ohne Ende.

Eine weitere Option wäre eine Bewerbung als IT-Consultant, obwohl ich das Gefühl habe, dass ich dafür mehr Erfahrung als Entwickler benötige. Wie soll ich Unternehmen beraten, wenn ich selbst keine Ahnung habe?

Es ist frustrierend, nach dem Sparen und Absolvieren der Weiterbildung keine Stelle zu finden, aber ich bleibe optimistisch und offen für Möglichkeiten. Ich hoffe, ihr könnt mir vielleicht ein paar Tipps geben.

Vielen Dank im Voraus

JavaScript, Jobsuche, Webentwicklung, Frontend, Junior
Wie bei html bei bild so copyright machen?

Also ich will dass bei jedem Bild so copyright an der Seite ist und habe so ein Code gemacht aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern.

       <figure>
            <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by Denis Nigmatullin on artstation
            </figcaption>  
           <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption>
           <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);position: absolute; right:91%;  top: 0%;">
               Image by Bibi Saint-Pol on wikimedia
           </figcaption>  
            <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by sheepskeleton on artstation
            </figcaption>   
           <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/564x/c6/10/5f/c6105feba2db225b5d7e52af0e427584.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption> 
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
    </p>
    </section>
Homepage, HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Frontend
Warum funktioniert der Button Offene Zahlungen begleichen nicht?

Hallo!

Mein Button Offene Zahlungen begleichen übergibt nicht den UserNamen der in dem DropDown menü asgewählt wird und ich habe keine Ahnung warum das so ist?

<div class="col-md-4"> <!-- Adjust the column width to make it narrower -->

<!-- Filters Card -->

<div class="card mb-3">

<div class="card-header">

Filter

</div>

<div class="card-body">

<div class="mb-3">

<label for="userDropdown" class="form-label">Benutzer auswählen:</label>

<select class="form-select" id="userDropdown" onchange="filterOrders()">

<option value="All Users">Alle Benutzer</option>

@foreach($users as $user)

<option value="{{ $user }}">{{ $user }}</option>

@endforeach

</select>

</div>

<div class="form-check">

<input class="form-check-input" type="checkbox" value="" id="unpaidCheckbox" onchange="filterOrders()">

<label class="form-check-label" for="unpaidCheckbox">

Offene Zahlungen anzeigen

</label>

</div>

</div>

</div>

<!-- Total Owed and Pay Button Card -->

<div class="card mb-3">

<div class="card-header">

Offene Zahlungen

</div>

<div class="card-body text-center total-owed-box">

<h4>€<span id="totalOwed">0.00</span></h4>

<form method="POST" action="{{ route('admin.payOrders') }}" id="payForm" class="d-inline">

@csrf

<input type="hidden" name="user" id="hiddenUser">

<input type="hidden" name="unpaidOnly" id="hiddenUnpaidOnly">

<button type="button" class="btn btn-success" onclick="showPasswordModal('{{ route('admin.payOrders') }}')">Offene Zahlungen begleichen</button>

</form>

</div>

</div>

<div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="passwordModalLabel">Passwort eingeben</h5>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

</div>

<div class="modal-body">

<div class="mb-3">

<label for="passwordInput" class="form-label">Passwort</label>

<input type="password" class="form-control" id="passwordInput" required>

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>

<button type="button" class="btn btn-primary" onclick="validatePassword()">Bestätigen</button>

</div>

</div>

</div>

</div>

</form>

function showPasswordModal(validateUrl, orderId, userName) {

const password = prompt('Please enter your password:');

if (password) {

validatePassword(validateUrl, orderId, password, userName);

}

}

function validatePassword(validateUrl, orderId, password, userName) {

const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

fetch(validateUrl, {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'X-CSRF-TOKEN': token

},

body: JSON.stringify({

password: password,

orderId: orderId,

userName: userName

})

})

.then(response => response.json())

.then(data => {

if (data.valid) {

alert('Order marked as paid successfully.');

location.reload(); // Reload the page to update the order status

} else {

alert(data.message);

}

})

.catch(error => {

console.error('Error:', error);

alert('An error occurred. Please try again later.');

});

}

</script>

<!-- Bootstrap Bundle with Popper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</body>

</html>

Könnt ihr mir vllt. helfen, DANKE!!!!

HTML, Webseite, JavaScript, Programmiersprache, Webentwicklung, Frontend
NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

HTML, JavaScript, Framework, Webentwicklung, API, Frontend, React, node.js, TypeScript
Qwik JS (ähnlich React) stellt context nicht richtig bereit?

Ich habe eine website die, wenn ein User diese öffnet, einen state für den user erstellen soll. Dieser wird mit useStore erstellt und hält ein dict. Von diesem state wird mithilfe von useContextProiver ein context erstellt um ihn den untergordneten komponenten zugänglich zu machen. Die zugehörige contextId die mit createContextId erstellt wurde, wird exportiert. Das Ganze findet im Komponenten StateShare stat. In einem anderen komponenten displayTodo soll dann der state aufgegriffen werden mit useContext.
Beide Komponenten werden in der index.tsx nacheinander returned damit sie ausgeführt werden. Das sieht dann so aus:
export default component$(() => {
return (

    <>

    <StateShare />

    <DisplayTodo />

    </>

  );

});

Es kommt dann zu einem error sobald das Programm ausgeführt wird:
Actual value for useContext(todo-context) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.

Diesen habe ich jetzt so verstanden, dass eben die stateShare Komponente nicht richtig ausgeführt wird bevor die DisplayTodo Komponente ausgeführt wird. Ich weiß aber nicht wieso... Ich bin sehr neu mit Qwik; Mache ich vielleicht etwas komplett falsch? Welches Konzept sollte ich mir da nochmal angucken?

HTML, Webseite, JavaScript, Framework, Programmiersprache, Webentwicklung, Frontend, React