Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

March 28, 2022 07:12 am GMT

React Native: State vs Props

The question that confuses most beginners in react.

What is the difference of props and state?

Lets clarify this.

Props includes data which we give to a component.

State includes data that is local or private to that component. So other components cannot access that state, it s completely internal to that component.

Lets say we have a Counters component.

import React, { Component } from 'react';import Counter from './counter';class Counters extends Component {  state = {    counters: [      {id: 1, value: 0},      {id: 2, value: 0},      {id: 3, value: 0},      {id: 4, value: 0}    ]  };    render() {    return (      <div>                { this.state.counters.map(counter =>          <Counter key={counter.id} value={counter.value} id={counter.id}>          </Counter>          )        }      </div>    );  }}export default Counters;

If you take a closer look at the render method of the Counters component:

<Counter key={counter.id} value={counter.value} id={counter.id}></Counter>

All attributes we are setting here are part of the props, the input to the Counter component.

We cannot access the state of this component. It is local and internal to that component.

Props is read only, for example lets look at the Counter component.

import React, { Component } from 'react';class Counter extends Component {  state = {    value: this.props.value  };  handleIncrement = product => {    this.setState({value: this.state.value + 1});  };  render() {    return (      <div>        <span className='badge badge-warning'>{this.state.value}</span>        <button          onClick={ () => this.handleIncrement({ id: 1 }) }          className="btn btn-secondary btn-sm">click        </button>      </div>    );  }}export default Counter;

Look closer at the helper method handleIncrement, which increments the counter by one:

handleIncrement = product => {  this.setState({value: this.state.value + 1});};

If we update the handleIncrement method to update the props.value like this:

handleIncrement = product => {  this.props.value = 0;  // this.setState({value: this.state.value + 1});};

And we increment it in the view, we would get this error:

So react does not allow you to change any props to any component.

If you would like to modify the input during the lifecycle of a component, you have to get that input and put it in the state like initially done in the handleIncrement method:

handleIncrement = product => {  this.setState({value: this.state.value + 1});};

More information about state and props

For more information about state and props visit the react docs.

Original Link: https://dev.to/andrehatlo/react-native-state-vs-props-33h7

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To