Creating a Stateless Functional Component in ReactJS

How to bind events and Uni-Directional Data Flow.

Download Demo Code: Download

Index.js



import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoItem from './component/TodoItem.js'


class TodoList extends React.Component {

	constructor(){
		super();
        this.changeStatus=this.changeStatus.bind(this);
		this.state={
			tasks:[{
                name:'PHP',
                completed:false
            },
            {
                name:'NodeJS',
                completed:false
            },
            {
                name:'ReactJS',
                completed:false
            }
            ]
		} 
	}

    changeStatus(index){
    var tasks=this.state.tasks;
    var task=this.state.tasks[index];
    task.completed=!task.completed;
    this.setState({
        tasks:tasks 
    });
    }
        render() {

        	return (
        	<ul  >
        	{
        		this.state.tasks.map((task,index)=>{
                   return (<TodoItem key={task.name} index={index} clickHandler={this.changeStatus} detail={task} />)
        		})
        	}
        	</ul>
            
            )   
        }
    }








        ReactDOM.render( <TodoList / > , document.getElementById('root'))

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import TodoItem from './component/TodoItem.js'

class TodoList extends React.Component {

constructor(){

super();

this.changeStatus=this.changeStatus.bind(this);

this.state={

tasks:[{

name:'PHP',

completed:false

{

name:'NodeJS',

completed:false

{

name:'ReactJS',

completed:false

}

]

}

changeStatus(index){

var tasks=this.state.tasks;

var task=this.state.tasks[index];

task.completed=!task.completed;

this.setState({

tasks:tasks

});

}

render() {

return (

<ul >

{

this.state.tasks.map((task,index)=>{

return (<TodoItem key={task.name} index={index} clickHandler={this.changeStatus} detail={task} />)

})

}

</ul>

)

}

ReactDOM.render( <TodoList / > , document.getElementById('root'))

component/TodoItem.js



 import React from 'react';

 // class TodoItem extends React.Component{

 // 	render(){
 // 		return (
 // 			<li onClick={ ()=>this.props.clickHandler(this.props.index)} className={this.props.detail.completed ? 'completed' : ''} >{this.props.detail.name}</li>
 // 			)
 // 	}
 // }   


 const TodoItem=(props)=>{
 	return (<li onClick={ ()=>props.clickHandler(props.index)} className={props.detail.completed ? 'completed' : ''} >{props.detail.name}</li>)
 }    

export default TodoItem;

import React from 'react';

// class TodoItem extends React.Component{

// render(){

// return (

// <li onClick={ ()=>this.props.clickHandler(this.props.index)} className={this.props.detail.completed ? 'completed' : ''} >{this.props.detail.name}</li>

// )

// }

const TodoItem=(props)=>{

return (<li onClick={ ()=>props.clickHandler(props.index)} className={props.detail.completed ? 'completed' : ''} >{props.detail.name}</li>)

}

export default TodoItem;

WeAnswer

See author's posts

Tags: Creating a Stateless Functional Component in ReactJS

WeAnswer

Installation of ReactJS

Deep Dive in JSX – ReactJS

State and Props in ReactJS

Django useful command

Mollie Payment – PHP Laravel

Difference between file, file_get_contents, and fopen in PHP

Amazing html canvas examples

Leave a Reply Cancel reply

More Stories

You may have missed