# Basic React to do list not working properly

**URL:** <https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650>\
**Category:** Curriculum Help\
**Created:** [December 26, 2022, 6:35pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650 "2022-12-26T18:35:19Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [December 26, 2022, 6:35pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/1 "2022-12-26T18:35:19Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [December 26, 2022, 7:25pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/2 "2022-12-26T19:25:50Z")

</div>

> [@Tsmithcode](#):
>
> 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.

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.

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [December 26, 2022, 7:35pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/3 "2022-12-26T19:35:47Z")

</div>

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_.

---

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [December 26, 2022, 7:36pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/4 "2022-12-26T19:36:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [December 26, 2022, 7:37pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/5 "2022-12-26T19:37:01Z")

</div>

Sorry, sorry, I meant “codepen”.

---

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [December 26, 2022, 7:37pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/6 "2022-12-26T19:37:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [December 26, 2022, 7:39pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/7 "2022-12-26T19:39:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [December 26, 2022, 7:41pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/8 "2022-12-26T19:41:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [December 26, 2022, 7:43pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/9 "2022-12-26T19:43:01Z")

</div>

“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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [December 27, 2022, 11:29am UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/10 "2022-12-27T11:29:55Z")

</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.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [June 27, 2023, 11:30pm UTC](https://forum.freecodecamp.org/t/basic-react-to-do-list-not-working-properly/580650/11 "2023-06-27T23:30:04Z")

</div>

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