Pass map's argument to function in ReactJS

Question

I am trying to make a todoList by ReactJS. I want to delete an item by its id, but when I console.log(id), it returns undefined. Here is my code

App.js:

import React, { Component } from 'react';
import './App.css';

import Header from './Components/header';
import InputTodo from './Components/todoInput';

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      todos:[
        {id:0,text:'Make dinner'},
        {id:1,text:'Fold the laundary'},
        {id:2,text:'Do homework'}
      ]
    }
  }

  addHere=(text)=>{
    this.setState({
      todos:this.state.todos.concat([text])
    })
  }

  removeHere=(id)=>{
    console.log(id);
    // let arr=this.state.todos;
    // let index=arr.findIndex((x)=>x.id===id);
    // console.log(index);
  }
  render() {
    return (
      <div className='todo-wrapper'>
        <Header/>
        <InputTodo todoText='Type Here...' addTodo={this.addHere}/>
        <div>
          {this.state.todos.map((value,key)=>{
            return (
            <div className='row myList' key={key}>
            <p className='col-xs-10'> {value.text}-{value.id} </p>
            <button className='btn btn-danger pull-right col-xs-2' onClick={this.removeHere(value.id)}>Delete</button> 
            </div>
          )})}
        </div>
      </div>
    );
  }
}

export default App;

The following is InputTodo.js:

import React, {Component} from 'react';
import '../App.css';

export default class InputTodo extends Component{
    constructor(props){
        super(props);
        this.state={
            todoInput:{
                id:2,
                text:''
            }
        }
    }


    handleSubmit=(e)=>{
        if(this.refs.title.value===''){
            alert('You must input something');
        }
        else{
            this.state.todoInput={
                id:this.state.todoInput.id+1,
                text:this.refs.title.value
            };
            this.setState(this.state);
            this.props.addTodo(this.state.todoInput);
            this.refs.title.value='';
        }
        e.preventDefault();

    }
    render(){
        return(
            <form className='input-group' onSubmit={this.handleSubmit}>
                <input type='text' ref="title" className='form-control'placeholder={this.props.todoText}/>
                <span className='input-group-btn'>
                <input type='submit' value='Submit' className='btn btn-primary'  />
                </span>
            </form>
        );
    }
}

this.removeHere.bind(this,this.state.todos.id) => this.removeHere.bind(this, value.id) you are still inside the map function here. — Rei Dien
– Rei Dien, Commented Sep 30, 2017 at 15:35
One question: In case I don't use bind and I write: function onClick={this.removeHere(value.id)} and I use arrow function in removeHere(id), when I console.log(id), it returns all the id. Can you please explain why? I thought bind is used to declare this in function — Alice
– Alice, Commented Sep 30, 2017 at 15:46
where are you putting the log? if its inside the map function it should return single value value.id === 'something' — Rei Dien
– Rei Dien, Commented Sep 30, 2017 at 15:48
in the removeHere function, outside the map actually: removeHere=(id)=>console.log(id) — Alice
– Alice, Commented Sep 30, 2017 at 15:53

Channing Allen · Accepted Answer · 2017-09-30 16:27:06Z

While FuzzyTree's answer will work, a cleaner approach would be extracting the todo item's JSX into its own component. This would have the added benefit of not creating a new function for the button's onClick prop every time App's render function gets called.

The component might look like this:

// TodoItem

class TodoItem extends Component {
  handleRemove = () => this.props.onRemove(this.props.id)

  render() {
    return (
      <div className='row myList'>
        <p className='col-xs-10'> {this.props.text}-{this.props.id} </p>
        <button className='btn btn-danger pull-right col-xs-2' onClick={this.handleRemove}> Delete </button>
      </div>
    )
  }
}

// App render

  render() {
    return (
      <div className='todo-wrapper'>
        <Header/>
        <InputTodo todoText='Type Here...' addTodo={this.addHere}/>
        <div>
          {this.state.todos.map(({ id, text }, key) =>
            <TodoItem key={key} id={id} text={text} onRemove={this.removeHere} />
          )}
        </div>
      </div>
    );
  }

Collectives™ on Stack Overflow

Pass map's argument to function in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related