30 Days of React: Props

Metadata

• Author: GitHub
• Full Title: 30 Days of React: Props
• Category: articles
• URL: https://github.com/amoslue/30-Days-Of-React/blob/master/05_Day_Props/05_props.md

Highlights

• Props is a special keyword in React that stands for properties and is being used to pass data from one component to another and mostly from parent component to child component. We can say props is a data carrier or a means to transport data. (View Highlight)
• // User component, component should start with an uppercase const User = (props) ⇒ { return (

  {props.firstName} {props.lastName}

  {props.country}
  ) } // calling or instantiating a component, this component has three properties and we call them props:firstName, lastName, country <User firstName = ‘Asabeneh’, lastName=‘Yetayeh’ country = ‘Finland’ /> (View Highlight)
  • Note: props example
• // Header Component const Header = (props) ⇒ { console.log(props) // empty object, {} return (

  {welcome}

  {title}

  {subtitle}

  {author.firstName} {author.lastName}

  {date}
  ) } // The App, or the parent or the container component // Functional Component const App = () ⇒ { return (
  ) } (View Highlight)
  • Note: use props to inject data