I'm having trouble understanding a very weird bug while doing Part 2 on Full Stack Open. In few words: passing an object to the component turns the object into a nested object. Namely:
entries.map(entry => { console.log(entry); return <PhonebookEntry props={entry} />})
on App.js and
function PhonebookEntry(props) {
console.log(props)
//rest of code
}
on index.js don't work as expected.
When ran, the browser's console displays the following:
Object { name: "Derp", surname: "Derpington", phone: "012345", address: "2012 Street" }
App.js:33
Object { props: {…} }
props: Object { name: "Derp", surname: "Derpington", phone: "012345", … }
<prototype>: Object { … }
PhonebookEntry.js:2
Here's App.js:
import { useState } from 'react'
import PhonebookEntry from './PhonebookEntry.js'
export default function App() {
function handleAddEntry(e) {
e.preventDefault()
setEntries(entries.concat({
name: newName,
surname: newSurname,
phone: newPhone,
address: newAddress
}))
}
const [entries, setEntries] = useState([
{
name: "Derp",
surname: "Derpington",
phone: "012345",
address: "2012 Street"
}
])
const [newName, setNewName] = useState('')
const [newSurname, setNewSurname] = useState('')
const [newPhone, setNewPhone] = useState('')
const [newAddress, setNewAddress] = useState('')
return (
<div>
<h1>Phonebook</h1>
<ul>
{entries.map(entry => { console.log(entry); return <PhonebookEntry props={entry} />})}
</ul>
<form onSubmit={handleAddEntry}>
Name: <input value={newName} onChange={(e) => setNewName(e.target.value) }/><br></br>
Surname: <input value={newSurname} onChange={(e) => setNewSurname(e.target.value)}/><br></br>
Phone: <input value={newPhone} onChange={(e) => setNewPhone(e.target.value)}/><br></br>
Address: <input value={newAddress} onChange={(e) => setNewAddress(e.target.value)}/><br></br>
<button type="submit">Add</button>
</form>
</div>
)
}
and here's PhonebookEntry.js:
function PhonebookEntry(props) {
console.log(props)
return (
<li>
<div>
Name: {`${props.surname}, ${props.name}`}
</div>
<div>
Phone: {props.phone}
</div>
<div>
Address: {props.address}
</div>
</li>
)
}
export default PhonebookEntry
