What is Props in React js

  • In ReactJS, "props" is short for "properties". It is a way to pass data from a parent component to a child component. Props are passed as an object of key-value pairs and are read-only, meaning that they cannot be modified by the child component.
  • Props are commonly used to customize the behavior and appearance of a component. For example, a parent component might pass a "title" prop to a child component to specify the text to display in a heading:
function Heading(props) {
    return <h1>{props.title}</h1>;
}

function App() {
    return <Heading title="Hello, world!" />;
}
  • In this example, the "App" component is passing a "title" prop to the "Heading" component, which uses it to render the text of the heading.
  • Props can be used with both functional and class components. In class components, props are accessed via the "this.props" object:
class Heading extends React.Component {
    render() {
        return <h1>{this.props.title}</h1>;
    }
}
  • Props can also be used to pass down functions as props, which allows child components to communicate with their parent components. This is commonly used to implement callbacks, event handlers, or to update state in the parent component.
  • In summary, props are a way to pass data from a parent component to a child component in ReactJS. They are read-only and can be used to customize the behavior and appearance of a component.

No comments:

Post a Comment