Hi there… I am chiming in here to find the issue with my code for this exercise as well. I also cannot manage to get a new thought to render, and when I saw this thread you suggested to change the text of on of the thoughts that are automatically added… But they did not change meaning Codecademy is having trouble compiling my code.
Does this mean I have a syntax error? The code is almost exactly the result of the hints, the helper video, and that which has been suggested here:
App.js
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 after 15 seconds.",
expiresAt: getNewExpirationTime(),
},
]);
const addThought = (thought) => {
setThoughts((prevThoughts) => [thought, ...prevThoughts])
}
return (
<div className="App">
<header>
<h1>Passing Thoughts</h1>
</header>
<main>
<AddThoughtForm addThought={addThought}/>
<ul className="thoughts">
{thoughts.map((thought) => (
<Thought key={thought.id} thought={thought} />
))}
</ul>
</main>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
AddThoughtForm.js
import React, {useState} from 'react';
import React from 'react';
import { generateId, getNewExpirationTime } from './utilities';
export function AddThoughtForm(props) {
const [text, setText] = useState('');
const handleTextChange = (event) => {
setText(event.target.value);
}
const handleSubmit = (event) => {
event.preventDefault();
const thought = {
id: generateId(),
text: text,
expiresAt: getNewExpirationTime()
}
props.addThought(thought);
}
return (
<form className="AddThoughtForm" onSubmit={handleSubmit}>
<input
type="text"
aria-label="What's on your mind?"
placeholder="What's on your mind?"
value={text}
onChange={handleTextChange}
/>
<input type="submit" value="Add" />
</form>
);
}
Thank you… I really like react and want to get better at hooks.
