Day 59

in code •  7 years ago 

March 13th, 2018

Hello! At the React for Beginners course by Wes Bos I did displaying state with JSX.
The goal was to move parts around the app. We do that by making a component.
If you want to use logic in JSX, just use JS.

Loop over all fish

     <ul className="fishes">{Object.keys(this.state.fishes).map(key => (
                                <Fish key={key} details={this.state.fishes[key]}/>

We take the "fish" from the state and map over it, and then render it out.

ES destructuring, set a lot of variables :
const { image, name, price, description, status } = this.props.details;

Include the helpers to convert dollars to cents

      {formatPrice(price)}

At the Web Development Bootcamp by Colt Steele I continued to work on the Yelpish App.
We made a new campgrounds page where we can add a new campground that will update the page.

    <form action="/campgrounds" method="POST">

Get and post are different, which is why we can use the sam url.

   app.get("/campgrounds/new", function(req, res){
          res.render("new.ejs");
       });

  app.post("/campgrounds", function(req, res){
             //get data from form and add to campgrounds array
            var newCampground = {name: name, image:image};
            campgrounds.push(newCampground);
            res.redirect("/campgrounds");

Cheers!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!