DEV Community

Deva I
Deva I

Posted on

What is props

What is props :

Props stands for properties.

Props in React are read-only inputs passed from a parent component to a child component.

Key characteristics of props :

Unidirectional Data Flow: Data flows one way, from parent to child.

Immutable (Read-Only): A child component must never modify the props it receives; they are read-only.

Reusable Components: Props allow you to use the same component structure with different data.

Dynamic Rendering: Props enable components to render different content based on the inputs provided.

Passing props(Parent component)

function App() {
  return <Greeting name="Alice" message="Hello" />;
}
Enter fullscreen mode Exit fullscreen mode

Receiving props(Child component)

function Greeting(props) {
  return <h1>{props.message}, {props.name}!</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Destructuring props :

function Greeting({ message, name }) {
  return <h1>{message}, {name}!</h1>;
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)