recipe-box | fcc project | State Container library

I´ve cloned this sample app: https://github.com/codekerala/laravel-and-vue.js-spa-Recipe-Box

In RecipeController there's an index function that returns all posts (or recipes in this case). I need to get only recipes added by the current logged in user.

...

I have a custom input component and if I pass a prop called value then it is not rendering at all, whereas if I change the name of the prop to something other than value then everything is working as expected. I am trying to figure it out for the past several hours but it was fruitless.

...

** This may be a simple answer, I'm new to React, thank you for any help ! **

Back story

I have a modal(bootstrap4) hidden inside the main app with a form inside that, when it rendered, the form is filled out based on the information from the selected recipe (more on that later.)

The recipes are stored locally and with this.state.currentRecipe I know which recipe is being selected (it is used as the index and is set to 0 by default.)

So, using this.state.currentRecipe as the index the first render naturally puts in the first recipe's information.

I attempted to solve this by making a function and passing it down the child components. The recipe-card has all the information and the edit button inside of it. So when the recipe-cards are all rendered by .map() I pass in their index and the function that was passed down in order to change the state of this.state.currentRecipe and re-render the DOM with the form having the new information.

What's wrong

Everything loads however, when I click the edit button the modal pops up with the first recipe always. It will even change this.state.currentRecipe but the DOM doesn't re-render with the proper recipe's information.

How do I get the form's information to update based on which recipe-card I'm in when I click the 'Edit' button?(there is a button in each card).

(and even if it did, would it just hide the modal again?)

Here is the link to the component folder of the repo https://github.com/JeremyWeisener/React-Recipe-box/tree/master/src/components

in case the code below isn't enough information

Here is the inside of the 4 main files I believe matter (cleaned up a bit and put here to make life easier) app.js ...

I'm trying to implement in my component. Later on I would like to reuse the same form for an update action. The recipe is still not added to the list.

1. I'm defining handleAddRecipe in my App.js.
2. passing it to component
3. from here passing it to component

What do I need to fix in these components?

component:

...

I'm getting an erro Cannot read property 'handleDeleteAll' of undefined. This is my code:

...

I'm doing something similar. I have a recipe blog and I will have different categories such as breakfast, dessert, lunch, etc... But I don't know how to link them the category pages. For example, If the users click "see all" for the breakfast category, it will show all breakfast post from the breakfast category. So that means it will link to the main breakfast category page. For each category i will show 10 recent post so the users is not seeing all post. So they have the option to see all the post if they click the "see all" link. It will link them to the main category page with all breakfast post. Of course if they click the dessert "see all" link, it will link them to the dessert category page which they can see all dessert posts.

This is my current code: (but what php code should i put for the "see all" link? IF you take a look at my "see all" a tag, it's # right now. It's not linking to somewhere, but how do i make it dynamic to link to the categories pages. So for example if i'm in the dessert section, if i click "see all" it will link to the dessert category. )

Please also take a look at my design

...

I have a recipe creator that creates recipes and also lists their ingredients. I want it to only show the Recipe name and it's div it's inside of, but when you click it, it reveals the ingredients section. If any other sections are open I want it to also close them.

I've tried a couple solutions with state but haven't come up with a solid solution. I could probably do it with jQuery but I've heard it's not good practice to use React and jQuery so I'd rather do it properly.

This is the full app: https://github.com/jeffm64/recipe-box2/tree/master/src/components

The recipe boxes are rendered through .map in the main app render function as shown here:

...