ReactJS Tutorial 37: Todo App Part 10 Separating JSX Into Components

How to separate JSX elements into components of their own in React.

[ashutoshpawar]

For anyone who feels confused about splitting components, just think of it as cutting HTML snippets and enclosing them inside normal functions.
It might feel confusing at first but you will get a hand of it.

[Hibat-ajoke]

Love the tree diagram you used to clarify the confusion at the end, thank you so much

[sundayothniel]

You simplified react for me. A thousand thanks to you, it is an amazing journey so far❤❤❤❤❤❤

[yousfali]

it is a little bit hard at the first but after i get it, man it was so fun, Thanks

[nml]

Very good approach and very good explanation.

[nitinrao]

getting good understanding from the videos can you make some full stack project videos

[derricksmith]

Baby shark Todoo doo todoo 😄😄😄
This was actually a great lesson.. many thanks!

[matiasc]

Amazing explanaition like always! thank you

[MagicAndReason]

I'm new to both React & TypeScript, but nevertheless I found there were a few small changes required to make the code work in TypeScript.

All of these changes should be done at the end of what's presented in the video, because it's mostly about declaring the types added in the function calls.

In TodoList.tsx, you'll need to declare the argument passed into TodoList({ todos }) as being an array of type string, like so:
export default function TodoList({ todos }: { todos: string[] }) { ... }

Form.tsx is a little tricker in how you define the type of setTodos, so change it from Form({ todos, setTodos }) to this code:
export default function Form({
todos,
setTodos,
}: {
todos: string[];
setTodos: (todos: string[]) => void;
}) { ... }

In the case above, you need to avoid declaring setTodos as a function because this is error-prone (ask an LLM, I dunno why). So instead you need to define the specific shape of that function, which is that it takes an array of type string and returns nothing (void).

There is a third and final fix you need to do for TypeScript and I'll explain that in a reply to this comment (below). Just give me a little time, please.

[harikapuli-mf]

instead of taking two states and iterating we can take single state and reset it. is that okay?

[Kwame_Kwao]

Hello bro, can you please increase the volume of your microphone little bit
? it seems your voice is really low throughout the course!

[henry]

Got the logic and I jus need to practice it more....it was confusing tho

[mohammedlaaro]

This has to be the most confusing episode so far

[WondasMedia]

I have so much enjoyed you previous courses, but I wish you did this part afresh not copying and paste.

Kinda of complicated

[MagicAndReason]

I thought the diagrams were very helpful. Thanks!

[hezzelke]

The other videos were smooth but the more i watch this the more complicated it gets, and the more errors i get.

[cocosun]

I feel this lecture is pretty much confusing. The previous ones are really well done, but this one just confuses me. Maybe you speak faster here and forget to slow down a little bit for your students. There are many tutors, not you, they like to throw out a bunch of information to the students and assume the students can understand everything they explained, which is impossible because if i understand, why I am here.

[noelkitonga]

Bruv, , this video threw me off completely