React Props and Key

React Props

Props stands for properties.

Props are arguments passed into React components. so passing props to a React component is like passing arguments to a JS function.

Props are passed to components via HTML attributes.

Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.

When we have to dynamically pass a data to an component, we pass it as props.

Passing props to a component

React takes all the props given to the component and wraps them up into an object and passes it to that component as an argument called props.

So the props are given to a component in the form of attributes but the props passed as an argument to that component is a JS object .

If you have a variable to send, and not a string as in the example above, you just put the variable name inside curly brackets.

function Car(props) {                     // here props is a js object 
    return <h2>I am a { props.brand } named {props.name}!</h2>;
  }

  function Garage() {
    const carName = "Ford";
    return (
      <>
          <h1>Who lives in my garage?</h1>
          <Car brand={ carName } name = "abc"/>       // here props are passed as attributes
      </>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Garage />);

Destructuring of props

Destructuring of props is possible since props is a JS object .
It allows the prop attributes to be used as variables.

Method 1 :

function Car({brand,name}) {          //destructuring
    return <h2>I am a { brand } named {name}!</h2>;
  }

  function Garage() {

    return (
      <>
          <h1>Who lives in my garage?</h1>
          <Car brand="Ford" name = "abc"/>
      </>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Garage />);

Method 2:

function Car(props) {
    const {brand , name} = props;               // destructuring
    return <h2>I am a { brand } named {name}!</h2>;
  }

  function Garage() {

    return (
      <>
          <h1>Who lives in my garage?</h1>
          <Car brand="Ford" name = "abc"/>
      </>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Garage />);

Important Fact !

Use of Props implements UI Driven Config.
It is UI driven by the config (incoming data). So the UI changes according to the data passed (in form of props).

---

KEYS

In React, keys are special string attributes you need to include when creating lists of elements. They help React identify which items have changed, are added, or are removed. This is crucial for efficient rendering and updating of the UI.

When there are some components at the same level then these components need to be represented by using a key which uniquely identifies these components
So that during looping, the re-rendering of all the components is avoided when a new component is added.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

Note: Don’t use index as the key (becoz the order of elements can change). So use them only when you don’t have any stable uniquely differentiating ids.

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);