Semantic-UI-React | The official Semantic-UI-React integration | Frontend Utils library

I've created a new React app by running npx create-react-app@latest --typescript . and I've run the project using npm start and it all works as expected. I ran npm install semantic-ui-react semantic-ui-css and that installs correctly.

But when I add import 'semantic-ui-css/semantic.min.css'; to index.tsx as instructed, I get a failed to compile error.

Here's my index.tsx file:

I have using this component to push data out, however i can not grab the document name i.e. "sampleCloudFunction" under CloudFunctionMonitor(please see picture) from the database and display it

docRef.id does not work, i am not looking for the ID but the actual name of the sub document?

so creating a project that updates me on my data in firebase however i have console logged the data and its constantly coming through. How do i stop the loop essentially so it doesn't crash.

I have a react form and a submit button in the end, when you submit it's supposed to have a popup dialog to inform you that your message is sent but the pages get refreshed fast and the dialog disappears. Below is my code

Why console.log(this) is undefined?

I have this Component and I try to get value from state and I'm getting error state from undefined, after that I'm try to print on console in onSubmit function this value and I get undefined, what is wron in my code?.

Thank you

I am struggling with some React functionality. My goal is to create a form where a day template can be added (for context - like a training club can make up a template of trainings for the day and then schedule them regularly). For that I wanted to add a button which onClick will create a smaller block with 2 form fields - time and training info. And I need user to add several of those, as much as they want.

The thing is, while I understand a bit how react works, it seems to me I am just banging my head against the wall with this, as one thing is to render a component, but another to generate a bunch of same, completely new ones and connected to the form somehow, so I can send the data when clicking submit button.

Here is repository with this component: https://github.com/badgerwannabe/spacefitness-test-client

Here is path to this component spacefitness-test-client/src/components/template-components/addTemplateForm.js

Here below how it looks rendered

UPDATE 1 here is the full component here:

Could someone please let me know why the state isn't being updated from the reducer? The useEffect(()=>{}) isn't being triggered when the state is being returned from the reducer. I have validated the correct information is being passed to the return, but nothing can be seen from the LoginScreen.

Currently I am using semantic ui css multiple dropdown validation. How do I validate the dropdown so that user has to choose at least ONE option before submitting ?

Right now the current output is that if I submit the form WITHOUT choosing any option, the error message appears.

However, if I choose an option and the submit, the error message still appears.

Following is my code.

I finished up an Ethereum smart contract course on Udemy that used solc@^0.4.17, React and Next.js. I thought it would be a fun exercise to try and upgrade everything to the latest version and try to refactor. I have the following code in a file called factory.js being imported into my main index file: