Deleting object of a state array in React using id-CodePudding

When I console.log(id) it give me the index of the object in the array and not the id I was trying to assign to it with the function that creates the object. So my question is how do I pull out a specific key value pair out of my arrays object and use it to make sure that I am deleting the right object?

Also I am really really new to programming.

import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import { nanoid } from "nanoid";

function App() {
    const [text, setText] = useState([]);
    const [textMaster, setTextMaster] = useState({
        paragraph: "",
        id: nanoid(),
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        const copy = [...text];
        copy.push(textMaster);
        setText(copy);
    };

    const handleClick = (e) => {
        handleSubmit(e);
    };

    const handleClickDelete = (id) => {
        console.log(id);
        const newText = text.filter((text) => text.id !== id);
        setText(newText);
    };

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>

                <form onSubmit={handleSubmit}>
                    <label>
                        Essay:
                        <textarea
                            name="item"
                            key={textMaster.id}
                            type="text"
                            value={textMaster.paragraph}
                            onChange={(e) => setTextMaster(e.target.value)}
                        />
                    </label>
                    <button onClick={(e) => handleClick(e)}>
                        Add new text
                    </button>
                </form>
                <ul>
                    {text.map((item, id) => {
                        return (
                            <>
                                <li key={id}>{item}</li>
                                <button onClick={() => handleClickDelete(id)}>
                                    Delete
                                </button>
                            </>
                        );
                    })}
                </ul>
            </header>
        </div>
    );
}

export default App;

CodePudding user response：

The map function returns the index as the second parameter, the text is not an object it wont have the id in it.

{
    text.map((item, index) => {
        return (
            <>
                <li key={index}>{item}</li>
                <button onClick={() => handleClickDelete(index)}>
                    Delete
                </button>
            </>
        );
    })
}

Then, in the delete function use the index to remove the text from the array updating the state with the new Array.

const handleClickDelete = (index) => {
    const newTexts = [...text]
    newTexts.splice(index, 1) // To remove the index 
    setText(() => newTexts);
};