I have an array of objects which is updated with useState. I can see on the console that my aray is succesfully updated. The new elements added are there. However when I map through it the new elements will not be displayed. Any help will be highly appreciated. This the code

const Guesslist=()=>{

   const [guestName, setGuestName]=useState('');
   const [guesstLastName, setGuestLastName]=useState('');
   const [guesstEmail, setGuesstEmail]= useState('');

   const initialList={id:1, guesstName:'Alan', guesstLastName:'Williams',guesstEmail:'[email protected]'}

   const [listOfGuesst, setListOfGuesst]= useState([initialList]);
   let guesst={
    id:Date.now(),
    guestName:guestName,
    guesstLastName:guesstLastName,
    guesstEmail:guesstEmail
}
   const addGuest= ()=>{
        
     
      let newList=[...listOfGuesst, guesst];
      
      setListOfGuesst(newList);
      console.log(listOfGuesst);
   
   }

   useEffect(()=>{
       console.log(listOfGuesst)}
       ,[listOfGuesst])

   
  
    return(
    
                    <div>
                        <label htmlFor="">First Name</label>
                          <input type="text" onChange={(e)=>setGuestName(e.target.value)} value={guestName} />
                        <label htmlFor="">Last Name</label>
                          <input type="text" onChange={(e)=>setGuestLastName(e.target.value)} value={guesstLastName} />
                        <label htmlFor="">Email</label>
                          <input type="text" onChange={(e)=>setGuesstEmail(e.target.value)} value={guesstEmail} />
                        
                        <button onClick={addGuest}>
                            add
                        </button>

                         <ul>
                            {listOfGuesst.map(element=>{
            
                                 return   <li key={element.id}>
                                            {element.guesstName}
                                            
                                          </li>
                            })}
                            
                        </ul>  
                    </div>

    )

}
export default Guesslist

CodePudding user response：

You have to use () when rendering a component.

<ul>
   {listOfGuesst.map(element => (
            <li key={element.id}>
              {element.guesstName}
            </li>
    ))}
</ul>  

CodePudding user response：

The error is that you forgot about the extra 's', first you initialize and output guesstName, and when adding a new guest - guestName.

Here guesstName :

const initialList = {
   id:1,
   guesstName:'Alan', 
   guesstLastName:'Williams',
   guesstEmail:'[email protected]'
}
// ...some code

// and here guesstName
<ul>
   {listOfGuesst.map(element=>{
     return <li key={element.id}>{element.guesstName}</li>
   })}
</ul> 

When you add a new guest - guestName :

   let guesst={
    id:Date.now(),
    guestName:guestName,
    guesstLastName:guesstLastName,
    guesstEmail:guesstEmail
}