Difference between state and stateless components in react js

javascript react js 6 years, 6 months ago

//State Component <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"> </script> <title></title> </head> <body> <div class="" id="app"> <script type="text/babel"> //Creating custom components var StateComponent = React.createClass({ resetName : function(event){ this.setState({name : ''}) }, nameChanged : function(event){ this.setState({name : event.target.value}) }, getInitialState: function(){ return { name: '' } }, render: function(){ let name = this.props.name; return ( <div> <input type="text" onChange={this.nameChanged}/> <h1 style={{color:'red'}}>Hello {this.state.name}</h1> <button type="button" onClick={this.resetName}>Reset</button> </div> ) } }); //End block of Component creation ReactDOM.render(<StateComponent />, document.getElementById('app')); </script> </div> </body> </html>

2280

0

0

Stateless Component : A pure dumb component just process the request on the set of properties and return a component with out a state change

State Component : By the name it tells us that based on event functionality it is going to change the state

If u want to work with stateless component then try to copy the (TaskList) component code from png to StateComponent and proceed.Happy Coding :-)

Posted By

Please Login to Comment Here


                            //plugin to any test js file and proceed
//This is the best standard to work with
const style = {background:'cyan', color:

javascript react js css


                            import React from 'react'
//No need to give the complete path, rea
//If not exists searches globally

javascript react js


                            //Basic way
<!DOCTYPE html>
<html>

javascript react js html


                            //Basic way
<!DOCTYPE html>
<html>

javascript react js webpack


                            import React from 'react'
export default class ToggleComponent ext
  constructor(props){

javascript react js


                            import React from 'react'
export default class StateProps extends

javascript react js


                            import React, { Component } from 'react'

javascript react js


                            async function showAvatar() {

  // read our JSON


                            //JS Code
function runShellScript(){
    const process = require('child_proce

javascript shell node js


                            //Fill


                            //Parent.js
import React from "react";
import Child from './Child'

javascript react js


                            // Delete the files recursively.
//fs is a built in node module.
const fs = require('fs');

javascript node js


                            const fs = require('fs');
//fs is a built in module in node js
const filePath = '/Desktop/Test.json';

javascript node js


                            //fs is a built in node module
const fs = require('fs');
const filePath = "/home/Desktop"

javascript node js


                            function getAllVideoAdGroups() {
  var adGroupIterator = AdWordsApp.video
  Logger.log('Total adGroups found : ' +

javascript adwords-script


                            /*App.js*/
import React, { Component } from 'react'

javascript react js


                            const tar = require('tar');
  tar.c(
    {

node js javascript react js


                            const tar = require('tar');
  tar.x(
    {

node js javascript react js


                            var my_list = [19, 32, 12, 34, 22];

$.each(my_list, function(index, value){

jquery javascript


                            var my_obj = {
    "one": "value1",
    "two": "value2",

jquery javascript