1. TIL (Today I Learned)

Props

Characteristics

• Refers to the component's properties. Its explained well in the previous State & Props Intro, props are values passed from outside that do not change, such as gender or name, and correspond to properties of the component in the web application.
• This is the value passed from the parent component. React components are JavaScript functions & classes, which receive props as arguments of the function and return React elements that describe how they are displayed on the screen based on them. Therefore, when the component is frist rendered, it can be used as an initial value containing the data to be displayed on the screen.
• Props is an object. Props have the form of an object so that any type of value can be passed as props.
• Props are read-only. Props are values that do not change as they are passed from the outisde like gender or name. So props are read-only objects that cannot be tampered with. Because it shouldn't be tampered with.

How to use Props

1. Define values (data) and properties to be passed to subcomponents.
2. Passed defined values & properties using props.
3. Renders the received props

To use props according to the step above, first declare the components < Parent > and < Child >, and then create the < Child > component in the < Parent > component.

function Parent() {
  return (
    <div className = "parent">
      <h1>I'm the parent</h1>
        <Child />
      </div>
    );
  };

function Child() {
  return (
    <div className = "child"></div>
  );
};

Now that we have the component, let's define the properties we want to pass. Just like how you assign attributes and values in HTML.

<a href="www.codestates.com">Click me to visit Code States</a>

Assigning properties and values in React is similar. However, you can wrap the value you want to pass by using curly braces {}.

<Child attribute={value}/>

Declare a property called text using the above method, assign a string value of "I'm the eldest child" to this property, and pass it to the Child component.

<Child text={"I'm the eldest child"}/>

Now, let's receive the string "I'm the eldest child" passed from the < Parent > component in the
< Child > component. It's simple. You just pass props to the React component just like passing arguments to a function, and these props will bring all the data you need.

function Child(props) {
  return (
    <div className="child"></div>
  );
};

Now that we've passed the props, let's finally render these props, you can call them directly inside JSX and use them. However, props are said to be objects, and {key:value} of this object takes the form of {attribute:values} defined in the < parent > component. Therefore, the same as using dot notation when accessing the value of an object in JavaScript, the value of props can also be accessed with dot notation. If I write props.text in JSX with curly braces like below, it works fine.

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

2. 3 Things to be Thankful for

1. Thank God for guiding me throughout the day.
2. Thank God for keeping my family and loved ones safe.
3. God pleas be with Patrick's family, they are surely in pain. Please touch and comfort them.

3. Ideas and things to think about

1. Korea should have a software that allows netflix-like book subscribing service. There are several services but the point they lack is that it is not fully updated. If the speed of updated books is same as that of a Kyobo Book Store in Korea the service will be well used. To add on, the company that provides such service should research about block-chain system based data update in each books to keep the books updated and delete misinformation.

2. Use the driver's car usage pattern and daily weather to analyze insights & sell it to car manufacturers to increase and develop more efficient battery products.