Basic React to do list not working properly

So, I took a small break from coding because I was getting frustrated and thought it was time for a break to regather. I came back and tried to build a very basic first React project and it’s not working properly.

The problem is I’m used to using codepen and I don’t know how to put copy my react project into Codepen because it’s multiple JS files. Hopefully someone will be able to understand what’s going on with just the main JS file.

the problem lies within the RemoveFromList function. It removes from the list but it also removes every item above the removed item as well. I have no idea why it’s doing this and can’t figure it out.

import React from "react"

export default function List() {

    const [inputText, setInputText] = React.useState('')
    const [itemsList, setItemsList] = React.useState([])

    function handleInputChange(e) {
        setInputText(e.target.value)
    }

    function addToList() {

        if (!inputText) {
            alert('required input')
            return
        }
        const item = {
            id: Math.floor(Math.random() * 10000),
            value: inputText
        }
        setItemsList((prevItemsList) => {
            return (
                [
                    <li>{item.value} <button onClick={() => { removeFromList(item.id) }}>x</button></li>,
                    ...prevItemsList
                ]
            )
        })
        setInputText('')
    }

    function removeFromList(id) {
        const updatedItemList = itemsList.filter((item) => {
            return item.id !== id
        })

        setItemsList(updatedItemList)
    }


    return (
        <div className="list-container">
            <input
                value={inputText}
                type="text"
                onChange={handleInputChange}
            />
            <button onClick={addToList}>Add</button>
            <ul>
                {itemsList}
            </ul>
        </div>
    )
}

Why do you want to go back to React [edit: I meant “codepen”]? That would be like someone wanting to put training wheels back on their bike, even after they’ve learned to drive. CP is a good learning tool and I still use it to try things out, but you want to move beyond it.

Looking at your code (sorry, I’m on vacation so I can’t try it out), I think that storing your JSX in your todo list is wrong. That should just be an array of objects. You should wrap them in a component when you map through the data.

Why isn’t your thing working? I don’t know off hand. There may be a scope/closure issue with what I mentioned about.

Have you logged out your data to see? My first instinct would be to go into removeFromList and log out id, itemsList, and updatedItemList.

Actually, having typed that, I think I see the issue. Log that stuff out and then reread the first paragraph. If you need to, go into the callback for the filter and log out item.id.

1 Like

I’m a bit confused on what you mean by “why do you want to go back to React?”

I’m still very fresh in React, I have not learned it yet.

1 Like

Sorry, sorry, I meant “codepen”.

Oh, I’m not sure. It was a nice way to get help with projects I was working on!

Once you react React, it’s time to start developing locally. Online IDE’s are learning tools and for fooling around. You should be moving forward, developing skills to help you to make more complex project.

well, I use VS code and createReactApp to actually work on the projects. I’ve always used VS code. I just liked codepen for when I needed help on forums. I could simply copy and paste my project into codepen and post it on the forum to get help easily.

I just don’t know how to do that with a React project.

“I think that storing your JSX in your todo list is wrong”

also, could you possibly clarify what you meant by this?

EDIT** I think this is what you meant

<div className="list-container">
            <input
                ref={inputRef}
                name="input-text"
                value={inputText}
                type="text"
                onChange={handleInputChange}
                onKeyDown={addToListWithEnterKey}
            />
            <button onClick={addToList}>Add</button>
            <ul>
                {itemsList.map((item) => {
                    return <li onClick={toggleTaskCompleted} key={item.id}>{item.value} <button onClick={() => { removeFromList(item.id) }}>x</button></li>
                })}
            </ul>
        </div>

Yeah, that looks like what I meant, at least with the JSX. I can’t see what’s going on with state. Is it working?

I just liked codepen for when I needed help on forums.

Yeah, it is easier… But you have to change the code to get it to fit. It can work if you reduce it down to just the idea, but then you have to do a lot of investigation to figure out what the issue is, Which you should be doing anyway. And also you can share code by sharing a link to a github repo, which you have to learn how to do anyway.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.