Props

Props (Properties) = Arguments to Components

import React from "react";
import ReactDom from "react-dom";
import "./index.css";

const People = () => {
  return (
    <section>
      <Person
        name="Ahmed Hassan Khan"
        job="Developer"
        number="03211177726"
      ></Person>
      <Person name="Ali Hassan Khan" job="Graphic Designer"></Person>
    </section>
  );
};

const Person = (props) => {
  console.log(props);

  // Javascript must be above the return statement and the function/component should follow the curly braces syntax no short forms.
  return (
    <section>
      <h1>{props.name}</h1>
      <h2>{props.job}</h2>
      <h3>{props.number}</h3>
    </section>
  );
};

ReactDom.render(<People></People>, document.getElementById("root"));

More Props

import React from "react";
import ReactDom from "react-dom";
import "./index.css";

const People = () => {
  const family = [
    { name: "Ahmed Hassan Khan", job: "Developer", number: "03211177726" },
    { name: "Ali Hassan Khan", job: "Designer", number: "03044948730" },
    {
      name: "Shahzaib Hassan Khan Kakar",
      job: "Accountant",
      number: "03001234567",
    },
  ];
  // we are nesting familyMember object into props object from array(family) of objects.
  return (
    <section>
      <Person familyMember={family[0]}></Person>
      <Person familyMember={family[1]}></Person>
    </section>
  );
};

const Person = (props) => {
  console.log(props);

  // we are accessing nested object properties.
  return (
    <section>
      <h1>{props.familyMember.name}</h1>
      <h2>{props.familyMember.job}</h2>
      <h3>{props.familyMember.number}</h3>
    </section>
  );
};

ReactDom.render(<People></People>, document.getElementById("root"));

Destructuring Props

import React from "react";
import ReactDom from "react-dom";
import "./index.css";

const People = () => {
  const family = [
    { name: "Ahmed Hassan Khan", job: "Developer", number: "03211177726" },
    { name: "Ali Hassan Khan", job: "Designer", number: "03044948730" },
    {
      name: "Shahzaib Hassan Khan Kakar",
      job: "Accountant",
      number: "03001234567",
    },
  ];
  // we are nesting familyMember object into props object from array(family) of objects.
  return (
    <section>
      {/* values are being passed as an object in the components, in this case familyMember object will be nested inside another object conventional called as props */}
      <Person familyMember={family[0]}></Person>
      <Person familyMember={family[1]}></Person>
    </section>
  );
};

const testObj = {
  name: "Ahmed Hassan Khan",
  age: 27,
};

// this method is used to acces the property of the object that we are not sure if it exist or not.
console.log(testObj.name);
// this method is used to acces the property of the object that we are sure that it exists in object.
const { age } = testObj;
console.log(age);
// another way of destructuring or accessing object and its properties.
const showObj = (name, age) => {
  return console.log(name, age);
};

showObj(testObj);

// we are destructuing props object method no 2
const Person = ({ familyMember: { name, job, number } }) => {
  console.log(name);

  // destructuring props object method no 1
  // console.log(props);
  // const { name, job, number } = props.familyMember;

  // we are accessing nested object properties.
  return (
    <section>
      <h1>{name}</h1>
      <h2>{job}</h2>
      <h3>{number}</h3>
    </section>
  );
};

ReactDom.render(<People></People>, document.getElementById("root"));

Child Props

Previous