how to use props and state in react

In this article, we can try to define ReactJS: how to use props and state, react state and props, and how to use props and state in react.

What is the Definition of Props and State

Props

Props are read-only components. So, Props is an object which stores the value of attributes of a tag and works similarly to the HTML attributes.

Props allow passing data from one component to another components. Props are similar to function arguments and can be passed to the component the same way as arguments passed in a function.

we cannot modify the props from inside the component because Props are fixed.

State

The state is information about the component and can change over time or an updatable structure that is used to contain data.

The State change in state can happen as a response to user action or system event and it is the heart of the react component which determines the behavior of the component and how it will render.

So, a state must be kept as simple as possible. Also, it represents the component’s local state or information.

Hence, it can only be accessed or modified inside the component or by the component directly.

Difference between Props and State

Props are read-only where State changes can be asynchronous.
Props are immutable where State is mutable.
Props allow you to pass data from one component to other components as an argument where State holds information about the components.
Props are external and controlled by whatever renders the component where The State is internal and controlled by the React Component itself.
Props make components reusable where the State cannot make components reusable.
Stateless components can have Props where Stateless components cannot have State.
Props are used to communicate between components where States can be used for rendering dynamic changes with the component.
Props can be accessed by the child component whereas State cannot be accessed by child components.
Both are plain JS objects, contain default values, and are read-only when they are used by this.

Using Props

Now, we can consider Comment as a component:

function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

This is also hard to reuse individual parts of it and components can be tricky to change because of all the nesting.

You can check our article: AdonisJS: REST API simple CRUD Operation. IF you want then buy a good, reliable, secure web hosting service from here: click here

So, it accepts the author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website.

So, let’s extract a few components from it. Firstly, we will extract Avatar:

function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}

Secondly, we can now simplify Comment a tiny bit:

function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

Next, extract a UserInfo component that renders an Avatar next to the user’s name:

function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}

Now, lets us simplify Comment even further:

function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.

Using State

Firstly, we will move the date from props to state in below three steps:

1. Replace props.datewith this.state.date in the render() method:

class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

2. After then, Add a class constructorthat assigns the initial state:

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

Here, note how we pass props to the base constructor and Class components should always call the base constructor with props.

constructor(props) {
super(props);
this.state = {date: new Date()};
}

3. Finally, Remove the dateprop from the <Clock /> element:

root.render(<Clock />);

So, we will later add the timer code back to the component itself and the result looks like this:

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.

ReactJS: How to use Props and State