Passing Knowledge Between React Elements with Props

Certainly one of React’s core ideas is reusability via composable elements. Elements permit splitting advanced UI into separate, reusable items. Nonetheless, for elements to speak, they want a solution to cross knowledge to one another. Enter props.

Props permit passing knowledge from a guardian part to a toddler part. They’re like perform parameters, however for React elements.

Let’s take a look at a easy instance:

// Dad or mum part
const Dad or mum = () => {
  return (
    <Little one 
      coloration="blue"
      onClick={handleClick} 
    />
  );
}

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

The guardian part Dad or mum passes two props to the kid part Little one – a coloration string and an onClick occasion handler.

The kid part 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 part expects, you’ll be able to outline them within the part perform or class:

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

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

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

You may as well set default values for props:

const MyComponent = (props) => 

Passing Props When Rendering Elements

When rendering a part, you cross props like perform arguments:

// Dad or mum part
<MyComponent
  title={title}
  content material={content material}
  creator={creator}
/>

Entry these within the baby part via props.

Props are read-only within the baby part. The kid can’t modify the props – this retains the info movement unidirectional.

PropTypes for Validation

It’s a good suggestion to validate props being handed to a part. React supplies 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,
  creator: PropTypes.form({
    title: 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 permit passing knowledge right into a part, state is used to trace modifications inside a part.

Use props for:

• Knowledge that doesn’t change
• Initializing part state
• Passing knowledge from guardian to baby elements

Use state for:

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

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

Conclusion

Props permit completely different elements to work collectively by passing knowledge between them. Outline props a part expects, then cross them when rendering:

// Dad or mum
<Little one title="Hey" /> 

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

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