Day 54 — SteemCN

March 8th, 2018

Hello! Today at the React for Beginners Course by Wes Bos I learned aboutPassing Dynamic data with props. Props, they are similar to HTML attributes, they provide more information.
Without them we not know what kind of input is needed.

Props is the way we get data into a component, or to get the data from one component to another.
Props is the way data travels. It is like arguments objects of a function.

         <Header tagline="I am cool" age={500} cool={true}/>

         {this.props.tagline}

this-the component instance
.props - object

$0 in the console will show you what elements you clicked in the Elements tab
$r – the samefor React
Components are actually objects.

Stateless Functional Components
If the component has only a render method than it does not need to be as long.
Simplify with arrow function and implicit return

             const Header = (props) => (
                  ...
             <span>{props.tagline}</span>
                  ...

At the Web Development Bootcamp by Colt Steel I worked on displaying data with movie API.

          res.render("results", {data:data}); - to display the object that is the api
          <% data["Search"].forEach(function(movie) {%>

Adding Search

          <form action="/results" method="GET" name="search">

action - to render the results templet
name - data will be stored in search

In the app.js we add a query var to get the search data, and concatenate with the url API.

           var query = req.query.search;

          var url = "http://omdbapi.com/?s=" + query +"&apikey=thewdb";
          request(url,function(error, response, body){}

Cheers!