How to add index value in the list using React.js? - reactjs

Question

I need to add index value in my data list using React.js. My code is below.
Itemlist.js:
import React, { Component } from "react";
class TodoItems extends Component {
constructor(props, context) {
super(props, context);
this.createTasks = this.createTasks.bind(this);
}
edit(key){
this.props.edit(key);
}
delete(key){
this.props.delete(key);
}
createTasks(item) {
return <li key={item._id}>{item.name}<a href="#" className="button bg_green" onClick={()=>this.edit(item._id)}>Edit</a><a href="#" className="button bg_red" onClick={()=>this.delete(item._id)}>Delete</a></li>
}
render() {
var todoEntries = this.props.entries;
var listItems = todoEntries.map(this.createTasks);
return (
<ul className="theList">
{listItems}
</ul>
);
}
};
export default TodoItems;
Todolist.js:
import React, { Component } from "react";
import TodoItems from "./TodoItems";
import "./TodoList.css";
import ItemService from './ItemService';
import axios from 'axios';
class TodoList extends Component {
constructor(props, context){
super(props, context);
this.state={
items:[]
}
this.addItem=this.addItem.bind(this);
this.deleteItem = this.deleteItem.bind(this);
this.editItem = this.editItem.bind(this);
this.ItemService = new ItemService();
}
componentDidMount(){
axios.get('http://localhost:8888/item')
.then(response => {
this.setState({ items: response.data });
})
.catch(function (error) {
console.log(error);
})
}
addItem(e){
e.preventDefault();
if(this.state.editKey){
this.saveEditedText();
return;
}
var itemArray = this.state.items;
if (this.inputElement.value !== '') {
itemArray.unshift({
text:this.inputElement.value,
key:Date.now()
})
this.setState({
items:itemArray
})
//console.log('items',this.state);
this.ItemService.sendData(this.inputElement.value);
this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">'+this.inputElement.value+' has added successfully</p>');
this.inputElement.value='';
setTimeout( () => {
this.divRef.querySelector(':last-child').remove();
window.location.reload();
}, 3000);
}
}
saveEditedText(){
let value = this.inputElement.value;
this.setState(prevState => ({
items: prevState.items.map(el => {
if(el.key == prevState.editKey)
return Object.assign({}, el, {text: value});
return el;
}),
editKey: ''
}));
this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">'+this.inputElement.value+' has updated successfully</p>');
this.inputElement.value='';
setTimeout( () => {
this.divRef.querySelector(':last-child').remove();
}, 3000);
}
render() {
return (
<div className="todoListMain">
<div className="header" id="parentDiv">
<div className="pageHeading" dangerouslySetInnerHTML={{ __html: "Todo Demo Application" }}></div>
<div className="wrapper">
<div ref={divEl => {
this.divRef = divEl;
}}></div>
<form onSubmit={this.addItem}>
<input ref={(a)=>this.inputElement=a} placeholder="enter task">
</input>
<button type="submit">{this.state.editKey? "Update": "Add"}</button>
</form>
<TodoItems entries={this.state.items} delete={this.deleteItem} edit={this.editItem}/>
</div>
</div>
</div>
);
}
}
export default TodoList;
Here after adding the data into db, the added data are shown in the list. Here I need to display the index value for each row means 1 - item1 like this.

Answer 1

You can do this by :
class TodoItems extends Component {
constructor(props, context) {
super(props, context);
this.createTasks = this.createTasks.bind(this);
}
edit(key){
this.props.edit(key);
}
delete(key){
this.props.delete(key);
}
render() {
var todoEntries = this.props.entries;
return (
<ul className="theList">
{todoEntries.map(this.createTasks, this)}
</ul>
);
}
createTasks(item, index) {
return (
<li key={item._id}>
{index} - {item.name}
<a href="#" className="button bg_green" onClick={()=>this.edit(item._id)}>Edit</a><a href="#" className="button bg_red" onClick={()=>this.delete(item._id)}>Delete</a>
</li>
)
}
};

Answer 2

If you mean to display index in ItemList component map has an overload which has paramater index that represents current index of element in array being processed.
See more in docs
So make createTasks(item, index){ } and then you will have access to index of the element.