First Project React Recipe Box

First Project React Recipe Box
0

#1

So, this is my first project ever from scratch! In school our assignments were usually 90% done, and we just had to pretty much fill in the missing parts. No experience of planning out projects, or even where to start. That definitely got to me, and I started this project later than I originally wanted to because I just had no idea what to even begin with. Over the course of this project I came to learn a lot about react! Still have a ways to go, but i feel more comfortable with it. Finally let me say thanks @collinstommy and @RandellDawson (still working on that render).
Their suggestions, and explanations proved invaluable! Anyway thats a big enough intro to a project.

So im open to anything. The only little thing that bugs me is I changed up the layout of the project, and now text-align did not work for my h1, so I was forced to go back to margin-left. At least on my screen and mobile device and computer it didnt work


#2

Hey @Cody_Biggs
It has come better :slight_smile:
I see you are facing that trouble still, it is possible to clear that.

  1. Move your h1 inside the .add-icon div
  2. Remove the margin-left from h1
  3. Make your .add-icon as block element ( You need not declare as display: block, just remove the display: inline you have already there )
  4. And then apply text-align: center to the .add-icon

Now it looks better :slight_smile:
Good Luck.


#3

@Sujith3021 your’e awesome! Now I can clean up some of this unneeded css


#4

You are welcome :wink:


#5

@Cody_Biggs Regarding how to conditionally render the Current Recipe when there is not recipe selected, all you have to do check if this.state.selectedRecipe.name is NOT undefined (falsy).

Below is your current code which displays the current recipe:

<div className="wholeRecipe">
   <div className="current-recipe">
      <h2> Current Recipe </h2>
      <div className="edit">
         <i className="far fa-edit fa-2x" onClick={this.handleModalShow}></i>
      </div>
      <div className="delete">
         <i className="fas fa-trash-alt fa-2x" onClick={this.deleteRecipe}></i>
      </div>
   </div>
   <br />
   <div className="recipe">
      <div className="recipe-info">
         Name:
      </div>
      <div ref="recipeName" className="recipe-print">{this.state.selectedRecipe.name}</div>
      <hr />
      <div className="recipe-info">
         Directions:
      </div>
      <div ref="cookDirections" className="recipe-print">
         {this.state.selectedRecipe.directions && this.state.selectedRecipe.directions.map((direction, index) => 
         <li>{direction}</li>
         )}
      </div>
      <hr />
      <div className="recipe-info">
         Ingredients: 
      </div>
      <div className="recipe-print">
         {this.state.selectedRecipe.ingredients && this.state.selectedRecipe.ingredients.map((ing, index) => 
         <li>{ing}</li>
         )}
      </div>
      <br />
   </div>
</div>

First, surround this entire section above with curly brackets. Then, reference this.state.selectedRecipe followed by &&. That is it. Below is a shortened version of what I am talking about.

{ this.state.selectedRecipe.name &&
  <div className="wholeRecipe">
    .
    .
    .
  </div> 
}

#6

@RandellDawson that’s what I was working on last night. I’m about to head out for work, and can try again when I get back. But I did that and kept getting the error “adjacent Jsx elements must be wrapped in closing tag” for the life of me I couldn’t find it. Unless I added something, and wasn’t paying attention.


#7

The pen above should be updated to show the render now.