CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Paul
Paul

Reputation: 283

this.setState and this.state.child use

In the code below there's a this.setState in the handleclick function and there's a this.state.child in the radio input, what's the function of both, I mean the this.setState and this.state.child as it relates to the whole code

App.js

import React, { Component } from 'react';

import DefaultChild from './DefaultChild';
import OtherChild from './OtherChild';

class Apps extends Component {

  constructor(props) {
  super(props);
  this.state = {
  child : 'default'
  }
  }

  handleClick(e) {
  console.log(e.target.value);
  this.setState({
  child: e.target.value
  });
  }

  render() {

   return (
  <div style={{padding:'40px'}}>
    <input type="radio" checked={this.state.child==='default' ? true : false}  name="pickComponent" value="default" onChange={this.handleClick.bind(this)} />   Default
    <br />
    <input type="radio" checked={this.state.child==='other' ? true : false}   name="pickComponent" value="other" onChange={this.handleClick.bind(this)} /> Other
    <hr />
    {this.state.child==='default' ? <DefaultChild /> : false}
    {this.state.child==='other' ? <OtherChild /> : false}
  </div>
    );

  }
 }

export default Apps;

Default.js

 class DefaultChild extends Component {

  render() {

 return (
   <div>
    Default
  </div>
  );

  }
}

export default DefaultChild;

Other.js

class OtherChild extends Component {

 render() {

return (
  <div>
    Other
  </div>
 );

 }
}

export default OtherChild;

Upvotes: 0

Views: 40

Answers (2)

devserkan
devserkan

Reputation: 17608

Looking to your question I understand that you are lack of basic React concepts. So, before writing some code or looking to a written one I strongly suggest you reading official documentation of React at least.

state is where your component's data is stored locally, on frontend side. So, when you hold some data and update it time to time, then to show those updates to your client you use state. Here, child is your data on your state. Name is up to you, you can hold as many data (property) as you want in your state. Then in your component somehow you manipulate those.

this.setState or actually setState schedules updates for your component state. So, when you want to change your state of your component you use setState. This triggers a new render for your component and your data is being updated.

Referencers:

https://reactjs.org/docs/state-and-lifecycle.html

https://reactjs.org/docs/faq-state.html

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074335

this.state.child is a state property that controls whether the "default child" or the "other child" is shown:

If this.state.child is "default", the "default child" is shown because of this expression:

{this.state.child==='default' ? <DefaultChild /> : false}

That expression resolves to <DefaultChild /> if this.state.child is "default", or to false if not. If it's <DefaultChild />, that gets rendered; if it's false, nothing gets rendered for that expression.

Above that, this.state.child also determines the checked property of the radio button:

checked={this.state.child==='default' ? true : false}

If this.state.child is "other", the same thing is done, but for the "other child".

this.setState({child: e.target.value}) sets the state in response to a radio button being clicked, changing child to the value of the radio button. This triggers a re-rendering of the component with that radio button shown checked and the appropriate child shown.

I recommend working through the React documentation to have a better understanding of rendering, state management, etc.

Upvotes: 2

Related Questions