React components how small should they be

I am working on my Recipe Box challenge and i am using Redux. I can’t seem to find a good way to structure my components, I’m not sure if i am doing something wrong or i am just creating too many components. This is my Structure of the components:
App
RecipesList (this is a container i connect my store to this component)
Recipe(name, )
RecipeHeader(name)
RecipeDescription(description)
IngredientsList([ingredients])
Button

So i have 6 components and i send my data to the RecipesList component. And after that do i need to pipe
my props from one element to the other in order to reach their final destination or should i create Containers to directly send the data to them? Or should i delete all these components after Recipe and put everything inside that component? What do you guys think is better?

This is the github code

And the screenshot of the page

Indentation does not work for some reason. The component tree is flat :frowning:

In my project, I had
app
recipe list
recipe
recipe form

I don’t think the header, ingredients and instructions need to be separated in their own component. They are not very big, and will not be used outside of the context of a recipe.
If you had an application where the Ingredient List was going to be used for recipes and for something else, it would make sense to separate it into a component.

The way I see it, there are two main reasons for making something a component - dividing the code into smaller chunks (for ease of reading and coding), and - making that code reusable.

In your case the ingredient list component by itself is not really reusable… the recipe is. So it’s up to you to decide if separating into its own component makes your code clearer.

But other people might have different opinions.
There’s nothing wrong with trying it the way you planned and seeing if you like it like that. You have the right idea about how to think about components, it’s just a matter of deciding how small you want your components to be.

One thing to add: also think about how you want your form to fit into that structure. Even if it is not visible on the screen, it is still part of the same component structure.

Thanks for the help. This clears up a lot of things. I still haven’t thought about the form but i will get there step by step :slight_smile: