Display array from child component in parent component react JavaScript-CodePudding

In the code below, I am passing object from the child component (AddContact.js) to the parent component (App.js) to save in the array in the parent component(contacts). My problem is how to display the array in the parent component. Both log button from the child component and the parent component are logging their array content to the console correctly but its not displaying

App.js


import './App.css';
import AddContact from './contact/AddContact';
import React, {useState} from 'react';

function App() {
    const [contacts, AddContacts] = useState([]);
    const Add = (data)=> {
      contacts.push(data);
    }
  return (
    <div>
        <AddContact Add={Add}/>
        <button onClick={()=>console.log(contacts)}>Parent Contacts Log</button>
        <table>
        {
             {/* to display the content of the array here is my problem*/}
            contacts.forEach(contact=>{
                <tr><td>contacts.indexOf(contact)</td><td>contact.name</td><td>contact.email</td></tr>
            })
        }
        </table>
    </div>
  );
}
export default App;

AddContact.js

import React,{useState} from 'react';

function AddContact(props) {
    const [cont, AddCont] = useState({name:' ',email:' '});
    return (
        <div>
            <div><input type='text' placeholder='Please enter your name' onChange={e=>AddCont({...cont,name:e.target.value})} /></div>
            <div><input type='text' placeholder='Please enter your email'  onChange={e=>AddCont({...cont,email:e.target.value})} /></div>
            <button onClick={()=>props.Add(cont)}>Add Contact</button>
            <div><button onClick={()=>console.log(cont)}>Child Cont Log</button></div>
        </div>
    )
}
export default AddContact;

CodePudding user response：

try this for add function:

const Add = (data)=> {
      AddContacts(contacts.concat(data));
    }

CodePudding user response：

For displaying looping Component you should use map instead of forEach.

** Suggestion from me, AVOID using forEach for iterating list, instead of using forEach you can use for in loop. One of reason is forEach can't process Asynchronous / await operation.

<table>
    {
        contacts.map((contact, index) => {
          return (
             <tr>
                <td>{index 1}</td>
                <td>{contact.name}</td>
                <td>{contact.email}</td>
             </tr>
          )
        })
    }
</table>

CodePudding user response：

forEach do not return anything.

For returning list of components, you can use map which returns array of components.

import './App.css';
import AddContact from './contact/AddContact';
import React, {useState} from 'react';

function App() {
    const [contacts, AddContacts] = useState([]);
    const Add = (data)=> {
      contacts.push(data);
    }
  return (
    <div>
        <AddContact Add={Add}/>
        <button onClick={()=>console.log(contacts)}>Parent Contacts Log</button>
        <table>
        {
             {/* to display the content of the array here is my problem*/}
            contacts.map(contact=>{ //<------ use map here
                return ( //<------- you have to return the component
                        <tr>
                          <td>contacts.indexOf(contact)</td>
                          <td>contact.name</td>
                          <td>contact.email</td>
                        </tr>
            })
        }
        </table>
    </div>
  );
}
export default App;

CodePudding user response：

Change add function

const Add = (data) => {
AddContacts(contacts.concat(data));
console.log(contacts)}

And use map

contacts.map((contact, index) => {
      return (
         <tr>
            <td>{index}</td>
            <td>{contact.name}</td>
            <td>{contact.email}</td>
         </tr>
      )
    })