# Props and State Explained

# What are Props in React?
React has a special object called prop (stands for property) which we use to transport data from one component to another.
props only transport data in a one-way flow (only from parent to child components). It is not possible with props to pass data from child to parent,

# How do you pass data with props?

const ChildComponent = (props) => {
return <p>{props.name}</p>;
};

class ParentComponent extends Component {
render() {
return (
<ChildComponent name="First Child" />
);
}
}

# What is state?
React has another special built-in object called state, which allows components to create and manage their own data. components cannot pass data with state, but they can create and manage it internally.

class Test extends React.Component {
constructor() {
this.state = {
id: 1,
name: "test"
};
}

render() {
return (
<div>
<p>{this.state.id}</p>
<p>{this.state.name}</p>
</div>
);
}
}

# How do you update a component’s state?
State should not be modified directly, but it can be modified with a special method called setState( ).

this.setState({
id: "2020"
});

# What are the differences between props and state?

-->Components receive data from outside with props, Components can create and manage their own data with state
-->Props are used to pass data, state is for managing data
-->Data from props is read-only, and cannot be modified by a component.
-->State data can be modified by its own component, but is private (cannot be accessed from outside)
-->Props can only be passed from parent component to child (unidirectional flow)
-->Modifying state should happen with the setState ( ) method