How to Add Data to a List in ReactJS

How to add data to list.

You can download code:Download

Or Try below code

Index.js



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


class TodoList extends React.Component {

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

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

        updateTask(newValue) {
            this.setState({
                currentTask: newValue.target.value
            })
        }
        addTask(evt) {
              console.log(this);
          
            evt.preventDefault();
          
          var tasks = this.state.tasks;
            let currentTask = this.state.currentTask;
            tasks.push({
                name: currentTask,
                completed: false
            })

            this.setState({
                tasks:tasks,
                currentTask:''
            })
        }
        render() {

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

                )
            }
        }




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

100

101

102

103

104

105

106

107

108

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

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

import TodoForm from './component/TodoForm.js'

class TodoList extends React.Component {

constructor() {

super();

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

this.updateTask = this.updateTask.bind(this);

this.addTask = this.addTask.bind(this);

this.state = {

tasks: [{

completed: false

{

completed: false

{

completed: false

}

currentTask: ''

}

changeStatus(index) {

var tasks = this.state.tasks;

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

task.completed = !task.completed;

this.setState({

tasks: tasks

});

}

updateTask(newValue) {

this.setState({

currentTask: newValue.target.value

})

}

addTask(evt) {

console.log(this);

evt.preventDefault();

var tasks = this.state.tasks;

let currentTask = this.state.currentTask;

tasks.push({

completed: false

})

this.setState({

tasks:tasks,

currentTask:''

})

}

render() {

return ( <section >

<TodoForm currentTask = {

this.state.currentTask

}

updateTask = {

this.updateTask

}

addTask = {

this.addTask

}

<ul >

{

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

return ( <TodoItem key = {

task.name

}

index = {

index

}

clickHandler = {

this.changeStatus

}

detail = {

task

} />)

})

}

</ul> </section>

)

}

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

component/TodoForm.js



 import React from 'react';
 const TodoForm=(props)=>{
 	return (<form onSubmit={props.addTask} >
 		<input required type="text" 
 		value={props.currentTask}
 		onChange={props.updateTask}
 		 />
 		 <button type="submit">Submit</button>
 		</form>)
 }    

export default TodoForm;

import React from 'react';

const TodoForm=(props)=>{

return (<form onSubmit={props.addTask} >

<input required type="text"

value={props.currentTask}

onChange={props.updateTask}

<button type="submit">Submit</button>

</form>)

}

export default TodoForm;

component/TodItem.js



 import React from 'react';
 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';

const TodoItem=(props)=>{

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

}

export default TodoItem;

index.css



body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

ul{
	width: 200px;
}
ul li{
	padding: 10px;

}

ul li{
	background: white;
	color:black;
	list-style: none;
}
.completed{
	background: #1275ed;
	color:white;
}
button{
	border: 1px solid gray;
}

form{
	padding: 20px;
	padding-left: 44px;
}

body {

margin: 0;

padding: 0;

font-family: sans-serif;

}

ul{

width: 200px;

}

ul li{

padding: 10px;

}

ul li{

background: white;

color:black;

list-style: none;

}

.completed{

background: #1275ed;

color:white;

}

button{

border: 1px solid gray;

}

form{

padding: 20px;

padding-left: 44px;

}

WeAnswer

See author's posts

Tags: Add Data to a List in ReactJS

WeAnswer

Installation of ReactJS

Deep Dive in JSX – ReactJS

State and Props in ReactJS

How to set EC2 Ubuntu default password

CPU & Memory usage in PHP

Install PHP mcrypt extension on Ubuntu

How to reset or change the MySQL root password?

Leave a Reply Cancel reply

More Stories

You may have missed