How does props and state work in REACTjs?

Question

Im new to reactjs. I dont really understand how does props and state work. From my research i have found that props are passed from parent to child. And states can only be used in a single component. But when i see these codes below, i have no idea how it works. Can someone provide me with a good example and explanation. Thanks

Not only that whats the difference between let and var

default class WildList extends React.Component {

    constructor(props){
    super(props);
    this.props = props;

    let {keyword, dealstatus} = this.props;

    this.state = {
    keyword
    }
    }

    }

PS = This WildList class is being used in different component as well.

"Not only that whats the difference between let and var" is a different question which has good answers - https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var — Sanil Khurana, Jan 30 '20 at 06:27
Does this answer your question? [What is the difference between state and props in React?](https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react) — akhtarvahid, Jan 30 '20 at 06:27

score 1 · Accepted Answer · answered Jan 30 '20 at 07:07

Simple state is specific to single component. you can define properties within the state. Once you change the state by setstate page will render again. example for props is below.

export default class Devices extends Component {
 constructor(props) {
    super(props);
    this.state = {
      userName: "Name 1",
      itemCount: 0, // this property can use within the Devices Component not in Device detail
     }
  }

  render() {
     .....
     //you can pass username to DeviceDetail page 
     <div>
          <DeviceDetail userName={this.state.userName} />
     </div>
}
}

//Inside DeviceDetail class
export default class DeviceDetail extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userName: props.userName, //you can call username using props
        }
    }
}

Var vs let

  getAllDevices = () => {
    var totalDevicesCount = 0; //  property is initially in the global scope. 

    let apiUrl = ....URL
    var response = fetch(apiUrl);
    const data = response.json();
    totalDevicesCount = data.length;

    if (data.length > 0) {
      this.state.itemCount = totalDevicesCount; // Since this is Var can use inside different block as well but inside this if condition you cannot use apiUrl. because it's let
    }

  }

Thanks for the answer Oshini. Meaning if i call username using props in the DeviceDetail component, i should get Name 1 right? — Sharana Dharshikgan, Jan 30 '20 at 07:22
yes correct. props.userName has Name 1 value. hope you can have better idea — Oshini, Jan 30 '20 at 07:57

score 0 · Answer 2 · answered Jan 30 '20 at 06:31

State - This is data maintained inside a component. It is local or owned by that specific component. The component itself will update the state using the setState function.

Props - Data passed in from a parent component. props are read-only in the child component that receives them. However, callback functions can also be passed, which can be executed inside the child to initiate an update.

The difference is all about which component owns the data. State is owned locally and updated by the component itself. Props are owned by a parent component and are read-only. Props can only be updated if a callback function is passed to the child to trigger an upstream change.

score 0 · Answer 3 · answered Jan 30 '20 at 06:32

0

State and Props are explained here

And let and var are explained here

and you should use the search function and allways just one question.

answered Jan 30 '20 at 06:32

Dennis Rieke

201
4
18

score 0 · Answer 4 · answered Jan 30 '20 at 06:35

0

In React, State holds the information about the happening or values of the component in which it is used. We can read the value from state can also set the value in state.

On the other hand, Props are read-only. Which are passed from parent component to share the state of parent component with child's. You can modify your scenario like:

default class WildList extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        keyword: this.props.keyword
      }
    }
 }

Hope this will help you.

answered Jan 30 '20 at 06:35

Muhammad Zeeshan

4,608
4
15
41

Thanks for the answer. But im still slighty confused because the parent component here is React.Component. So how does the value comes through the props? Sorry for asking silly questions but still quite new to react and js too. – Sharana Dharshikgan Jan 30 '20 at 06:40
`React` take cares of that. Whenever we create a component, under the hood react compiles it like `React.createElement` and it holds your props that you are passing it. For more you can check out the official documentation here https://reactjs.org/docs/react-api.html – Muhammad Zeeshan Jan 30 '20 at 06:45

How does props and state work in REACTjs?

4 Answers4