Hello peepz of the web,

I've ran into mysterious corridor, which's too dark for me to see what the hell I'm going.. would love someone's flashlight to shine the way.

I have created a simple, poor to do list program.

It's combined from Task.js, TaskList.js and NewTaskForm.js.

From the NewTaskForm.js I'm retrieving input, passing it to the parent, TaskList.js.

On TaskList.js I'm adding a key to the task object:

handleSubmit(task2add){
    let keyid = v4();
    console.log(keyid);
    let task2addWithID = { ...task2add, id: {keyid}, key: {keyid}};
    this.setState(st => ({
        todoArr: [...st.todoArr, task2addWithID],
    }));
}

Now, in TaskList.js, in my render function, I'm creating Tasks:

    render() {
        let tasklist = this.state.todoArr.map(task => (
            <div>
                <Task 
                    taskTitle={task.title} 
                    taskText={task.text} 
                    key={task.key}
                    id={task.id}
                    handleRemove={this.handleRemove}
                    handleEdit={this.handleEdit}
                />
            </div>
        ));

    return (
      <div>
        
        <h1>TaskList</h1>
        <div className='TaskList'>
            <div className='TaskList-title'>
            {tasklist}
            </div>
            <NewTaskForm key={1} handleSubmit={this.handleSubmit}/>
        </div>

      </div>
    )
  }

now, what is so confusing for me is why when I'm doing in my Tasks.js class:

console.log(this.props.id); 

it prints me an object?

I would expect it to.. print me a value? where along the way did it wrap it with an object?

Full (shitty) code below.

Plus #1, if anyone knows to tell me why still I get the warning the key, even though, at least for my poor experience, I have given it a key?

Plus #2, why even when I send the handleRemove function in TaskList.js the proper id, it doesn't erase the bloody task? :-(

Regards!

Task.js

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

export default class Task extends Component {
    constructor(props){
        super(props);
        this.handleRemove = this.handleRemove.bind(this);
    }

    handleRemove(evt){
        evt.preventDefault();
        console.log("MY ID MANNN");
        console.log(this.props.id);
        this.props.handleRemove(this.props.id.keyid);
        console.log("CALLED");
    }


  render() {
    return (
      <div className='Task'>
        <div className='Task-title'>
        {this.props.taskTitle}
        </div>
        <div className='Task-text'>
            {this.props.taskText}
        </div>
        <div>
            <button className='Task-buttons'>Edit</button>
            <button className='Task-buttons' onClick={this.handleRemove}>Delete</button>
        </div>
        </div>
    )
  }
}

NewTaskForm.js:

import React, { Component } from 'react';
import {v4} from 'uuid';


export default class NewTaskForm extends Component {
    constructor(props){
        super(props);
        this.state = {
            title: "", text: "", editing: false
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        // this.handleRemove = this.handleRemove.bind(this);
    }

    handleSubmit(evt){
        evt.preventDefault();
        
        // let stateWithID = { ...this.state, id: useId()};

        this.props.handleSubmit(this.state);


        this.setState({
            title: "",
            text: ""
        })
    }

    handleChange(evt){
        evt.preventDefault();
        this.setState({
            [evt.target.name]: evt.target.value
        });
    }


    render() {

       

    return (
      <div>
        
        <h2>Insert new Task:</h2>
        <form onSubmit={this.handleSubmit}>
            <label htmlFor="title">Title</label>
            <input  
                name='title'
                id='title'
                type='text'
                onChange={this.handleChange}
                value={this.state.title}
                 />
        <div>
        <label htmlFor="text">text</label>
            <input  
                name='text'
                id='text'
                type='text'
                onChange={this.handleChange}
                value={this.state.text}
            />

        </div>
        <button>Submit</button>
        </form>
        </div>
    )
  }
}

TaskList.js

import React, { Component } from 'react'
import NewTaskForm from './NewTaskForm';
import Task from './Task';
import './TaskList.css';
import {v4} from 'uuid';

export default class TaskList extends Component {
    constructor(props){
        super(props);
        this.state = {
            todoArr: [ 
                // {title: "test", text: "this shit", key: "", id: ""},
                // {title: "test2", text: "this shi2", key: "", id: ""},
                // {title: "test3", text: "this shi3", key: "", id: ""}
        
        ],
            isEditing: false,
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleRemove = this.handleRemove.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
    }

    handleSubmit(task2add){
        let keyid = v4();
        console.log(keyid);
        let task2addWithID = { ...task2add, id: {keyid}, key: {keyid}};
        this.setState(st => ({
            todoArr: [...st.todoArr, task2addWithID],
        }));
    }

    handleRemove(keyid){
        console.log("IN HANDLE REMOVE");
        console.log(keyid);
        this.setState(st => ({
            todoArr: st.todoArr.filter(n => n.keyid !== keyid )
        }));
    }

    handleEdit(id){

    }
  
    render() {
        let tasklist = this.state.todoArr.map(task => (
            <div>
                <Task 
                    taskTitle={task.title} 
                    taskText={task.text} 
                    key={task.key}
                    id={task.id}
                    handleRemove={this.handleRemove}
                    handleEdit={this.handleEdit}
                />
            </div>
        ));

    return (
      <div>
        
        <h1>TaskList</h1>
        <div className='TaskList'>
            <div className='TaskList-title'>
            {tasklist}
            </div>
            <NewTaskForm key={1} handleSubmit={this.handleSubmit}/>
        </div>

      </div>
    )
  }
}

CodePudding user response：

Because you have created an object here:

{ ...task2add, id: {keyid}, key: {keyid}};

{keyid}

is the same as

{keyid: keyid}

You wanted to do this:

{ ...task2add, id: keyid, key: keyid};

CodePudding user response：

I'm assuming its because you're setting the state like this:

  let task2addWithID = { ...task2add, id: {keyid}, key: {keyid}};

The id attribute is assigned an object. If you did:

  let task2addWithID = { ...task2add, id: keyid, key: {keyid}};

console logging id should print out a string