Не могу отобразить данные. Ошибка вероятно в пропсах, но не могу понять где

Question

Разбираюсь с реактом. Создал небольшой проект где нужно добавлять и отображать имена в списке. Реализация вроде правильная, так как пропс с именем создается, однако отобразить добавленные имена по какой-то причине я не могу. Подскажите пожалуйста, что я делаю не так и как это исправить.

import React, { useState } from 'react'


const Person = ({name}) => {
    return (
        <li>{name}</li>
    )
}

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

  const addPerson = (event) => {
    event.preventDefault()
    const personObject = {
      name: newName.trim(),
    }

    setPersons(persons.concat(personObject))
    setNewName('')
  }

  const handlePersonChange = (event) => {
    console.log(event.target.value)
    setNewName(event.target.value);
  }

  

  return (
    <div>
      <h2>Phonebook</h2>
      <form onSubmit={addPerson}>
        <div>
          name: <input onChange={handlePersonChange}
          value={newName}
          />
        </div>
        <div>debug: {newName}</div>
        <div>
          <button type="submit">add</button>
        </div>
      </form>
      <h2>Numbers</h2>
      <ul>
//ошибка скорее всего тут.
        {persons.map(person =>
        <Person person={person} />
        )}
      </ul>
    </div>
  )
}

export default App

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Ошибка была в компоненте Person. Вот правильный вариант

const Person = ({person}) => {
return (
    <li>{person.name}</li>
)
}

БЛОГ НА HUSL

Не могу отобразить данные. Ошибка вероятно в пропсах, но не могу понять где

Ответы (1 шт):