Certainly one of React’s core ideas is reusability by means of composable elements. Parts enable splitting advanced UI into separate, reusable items. Nevertheless, for elements to speak, they want a strategy to move knowledge to one another. Enter props.

Props enable passing knowledge from a mother or father element to a toddler element. They’re like operate parameters, however for React elements.

Let’s take a look at a easy instance:

// Guardian element
const Guardian = () => {
  return (
    <Little one 
      coloration="blue"
      onClick={handleClick} 
    />
  );
}

// Little one element
const Little one = (props) => {
  return <div>{props.coloration}</div> 
}

The mother or father element Guardian passes two props to the kid element Little one – a coloration string and an onClick occasion handler.

The kid element receives these as a props object and might entry them as props.coloration and props.onClick.

Defining Props in a Part

To specify the props a element expects, you possibly can outline them within the element operate or class:

// Perform element
const MyComponent = (props) => {
  // ...
}

// Class element 
class MyComponent extends React.Part {
  // ...
}

React will examine that elements are handed all of the props they count on. This helps catch bugs early.

It’s also possible to set default values for props:

const MyComponent = (props) => 

Passing Props When Rendering Parts

When rendering a element, you move props like operate arguments:

// Guardian element
<MyComponent
  title={title}
  content material={content material}
  writer={writer}
/>

Entry these within the little one element by means of props.

Props are read-only within the little one element. The kid can’t modify the props – this retains the information circulate unidirectional.

PropTypes for Validation

It’s a good suggestion to validate props being handed to a element. React offers a PropTypes module to specify prop sorts:

import PropTypes from 'prop-types';

const MyComponent = (props) => {
  // ...
}

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
  content material: PropTypes.string.isRequired,
  writer: PropTypes.form({
    identify: PropTypes.string.isRequired,
    avatar: PropTypes.string
  })
}

This validates props handed to MyComponent. If invalid props are handed, a warning will seem within the console.

When to Use Props vs State

Whereas props enable passing knowledge right into a element, state is used to trace modifications inside a element.

Use props for:

• Knowledge that doesn’t change
• Initializing element state
• Passing knowledge from mother or father to little one elements

Use state for:

• Knowledge that modifications over time
• UI state primarily based on person interplay
• Re-rendering elements when knowledge modifications

Getting the excellence proper takes observe – misusing props and state is a typical supply of bugs in React.

Conclusion

Props enable completely different elements to work collectively by passing knowledge between them. Outline props a element expects, then move them when rendering:

// Guardian
<Little one title="Whats up" /> 

// Little one
const Little one = (props) => {
  <h1>{props.title}</h1>
}

Props enable a unidirectional knowledge circulate between dad and mom and youngsters. Mixed with state to handle altering knowledge, they make constructing reusable elements a lot simpler in React.