Props and State

Props and State are fundamental concepts in React.js. Props are attributes that we pass to components, while State represents a component’s internal data.

Props

They are used to pass data from a parent component to a child component. For example, imagine a button component that receives the “text” property to display the button label:

function Button(props) {
  return <button>{props.text}</button>;
}

<Button text="Click Here" />;

State

It is used to represent the internal state of a component. For example, a counter component may have a state that controls the number of clicks:

import React, { useState } from 'react';

function Counter() {
  const [clicks, setClicks] = useState(0);

  return (
    <div>
      <p>Clicked {clicks} times</p>
      <button onClick={() => setClicks(clicks + 1)}>Click Here</button>
    </div>
  );
}

<Counter />;

Importance

Props and State allow components to be dynamic and reusable, making development more efficient and organized.

Conclusion

Understanding how to use Props and State is essential for building robust and scalable React.js applications. These concepts are the foundation for creating flexible and interactive components.

Compartilhar

Compartilhar

Siga-me