React Error and console.log Issue

JavaScript
1

Hey,

If I console.log(persons), it shows up for a fraction of a second and then disappears (it originally flashed an object, but now it flashes uncaught). If I type persons in the console it gives this error: VM675:1 Uncaught ReferenceError: persons is not defined at :1:1.

Anyone know what’s causing the error and why the console.log isn’t staying on the screen? Thanks

import { useState } from 'react'

const App = () => {
  const [persons, setPersons] = useState([
    { name: 'Arto Hellas' }
  ]) 
  const [newName, setNewName] = useState('')

  function handleSubmit() {
    e.preventDefault();
    const personObj = {
      name: newName
    }
    setPersons(persons.concat(personObj))
    setNewNote('');
  console.log(persons)
  }

  function handleNameChange(e) {
    setNewName(e.target.value)
  }

  return (
    <div>
      <div>debug: {newName}</div>
      <h2>Phonebook</h2>
      <form onSubmit={handleSubmit}>
        <div>
          name: <input onChange={handleNameChange} type="text" value={newName} />
        </div>
        <div>
          <button type="submit">add</button>
        </div>
      </form>
      <h2>Numbers</h2>
      <div>
        <ul>
          {persons.map(person => {
            <li>{person}</li>
          })}
        </ul>
      </div>
    </div>
  )
}

export default App
3

Ok, maybe it’s just something on my end. I’m tring to get the names to print below ‘Numbers’. Can you give me a hint as to where I’m going wrong? Heres where I’m at so far. Thanks

4

Got it working. I needed parentheses instead of curly braces, if anyone’s interested:

wrong:

          {persons.map(person => {   <-- need () instead of {}
            <PersonItem key={person.id} person={person} />
          })}

right:

          {persons.map(person => (
            <PersonItem key={person.id} person={person} />
          ))}
5

Did you fix it? It seems to work.

As an aside, for logging state variables using a useEffect is a good way of doing it.

useEffect(() => {
  console.log(someState);
}, [someState]);
1 Like
6

You can do both, but you have to remember the return if you use a function body.

1 Like
7

Ya, got it working, but now it’s giving me: ‘Warning: Each child in a list should have a unique “key” prop.’ I guess I’m doing that wrong? And thanks for the tip about useEffect. That’ll come in handy!

8

The initial state object doesn’t have an id property.

Also, what the user types can not be guaranteed to be unique. Use a random value or something you know is unique for each object.

You should be able to use the global randomUUID method (do it in the handler, not the loop).

globalThis.crypto.randomUUID()

You should not declare components inside components. Move the PersonItem component definition out of the App component.

1 Like
9

Thanks, that’s what was causing the error.

Ya, I know, I was wondering about that too. I’m just following a tutorial. I’m sure they’ll go into that further a long. They just said to just use the names for now. In the next exercise, we’re supposed to: “Prevent the user from being able to add names that already exist in the phonebook.”

I used nanoid once before. Haven’t used UUID yet, but I’ll try it if they don’t go into it before the end of this project.

Thanks for pointing that out. Just read something about that yesterday. Totally forgot.

Thanks for all the feedback!

10

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