Props 
Component using props:
export default function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Passing information:
<Greeting name="John" />
<Greeting friend={true} />
<Greeting age={23} />
<Greeting hobbies={["Gaming", "Photography", "Cooking"]} />

Using multiple props:
<Greeting name="John" friend={true} age={23} hobbies={["Gaming", "Photography", "Cooking"]} />

Props allow us to pass information. Made by adding custom attributes which hold the information. Components re-render whenever there is a change.

Props React
Props Logic 
function ConditionalComponent({ isLoggedIn }) { 
return (
  <div>
    {isLoggedIn ? (
      <h1>Welcome back!</h1>
    ) : (
      <h1>Please log in</h1>
    )}
  </div>
  );
}
export default ConditionalComponent;

Can use props with JavaScript.

Props React
Events as Props 
function ChildComponent(props) {
  return (
    <button onClick={props.handleClick}>
      Click me!
    </button>
  );
}

function ParentComponent() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

You can pass event handlers from other components as props.

Props React
Destructuring Props 
export default function Greeting({ name, age }) { 
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

To use props as variables, could also help define what prop names a component is using.

Props React
Props Children 
import React from 'react';

function ParentComponent({ children }) {
  return (
    <div>
      <h1>Parent Component</h1>
      <div>{children}</div>
    </div>
  );
}

function App() {
  return (
    <ParentComponent>
      <h2>Hello, children!</h2>
      <p>Child 1</p> 
      <p>Child 2</p> 
    </ParentComponent>
  );
}

export default App;

Every component's props object has a property called children. Returns everything in between a component's opening and closing JSX tags. Returns a single child if only one, if multiple returns an array of those children.

Props React
Mapping Components 
import React, { useEffect, useState } from 'react';

function ItemList() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // Simulating API call to fetch items
    fetch('https://api.example.com/items')
      .then((response) => response.json())
      .then((data) => setItems(data.items))
      .catch((error) => console.log(error));
  }, []);

  return (
    <div>
      {items.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  );
}

function Item({ item }) {
  return (
    <div>
      <h3>{item.name}</h3>
      <p>{item.description}</p>
    </div>
  );
}

function App() {
  return <ItemList />;
}

export default App;

To map components with data using props.

Props React
Props with Spread 
import React from 'react';

function DisplayUser({ name, age, city }) {
  return (
    <div>
      <h2>User Information</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}

function App() {
  const user = {
    name: 'John Doe',
    age: 30,
    city: 'New York',
    occupation: 'Developer',
  };

  return (
    <div>
      <h1>User Details</h1>
      <DisplayUser {...user} />
    </div>
  );
}

export default App;

Information

Props React
Default Props 
Using defaultProps:
function Component(props) {
  return <h1>{props.text}</h1>
}

Component.defaultProps = {
  text: 'default text',
};


Using destructuring: 
function Component({text='default text'}) {
  return <h1>{text}</h1>
}

But inside function body: 
function Component(props) {
  const {text = 'default text'} = props;
  return <h1>{text}</h1>
}

To set default props, to provide default information when certain props are not provided.

Props React