Https://www.codecademy.com/courses/react-101/projects/react-hooks-passing-thoughts

https://www.codecademy.com/courses/react-101/projects/react-hooks-passing-thoughts

I am working on the Add Thoughts exercise specifically task 10

Here is my code:

import React, { useState } from ‘react’;
import ReactDOM from ‘react-dom’;
import { AddThoughtForm } from ‘./AddThoughtForm’;
import { Thought } from ‘./Thought’;
import { generateId, getNewExpirationTime } from ‘./utilities’;

function App() {
const [thoughts, setThoughts] = useState([
{
id: generateId(),
text: ‘This is a place for your passing thoughts.’,
expiresAt: getNewExpirationTime(),
},
{
id: generateId(),
text: “They’ll be removed after 15 seconds.”,
expiresAt: getNewExpirationTime(),
},
]);

const addThought = (thought) => {
setThoughts(prev => [thought, …prev]);
};

const removeThought = (thoughtIdToRemove) => {
setThoughts((prev) => { return thoughts.filter((thought,index) => index !==thoughtIdToRemove)
});
}

return (



Passing Thoughts






    {thoughts.map((thought) => (

    ))}



);
}

ReactDOM.render(, document.getElementById(‘app’));

I just finished writing the removeThought function, and it seems to be working except when there is only one thought left in my list and I click the x on the button to delete it, it won’t delete. What gives? It works when there are multiple thoughts but not when there is only one left?

Part of your code is unreadable in the forums because it contains HTML elements in the JSX.

Please post the code using this option:
image

Alternatively, you could generate a link to a GitHb Gist by clicking this button from within the learning environment:
image