uuid key in prop appears as an object? REACTjs

Question

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>
    )
  }
}

Answer 1

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

Answer 2

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};