how can I display a list of contacts with name, age, location, and phone props in react? my code does not display anything

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const initiaState = {
   name: '',
   age: '',
   location: '',
   phone: ''
}
function AddPersonForm(props){
   const [state, setState] = useState(initiaState);
   const handleChange=(e) => { 
       let value = e.target.value;
       let name = e.target.name;
       setState({...state, [name]: value});
    }
    function handleSubmit(e){
       if (state.name !=='' && state.age !=='' && state.location !=='' && state.phone !==''){
          props.handleSubmit(state);
          setState({
             name: '',
             age: '',
             location: '',
             phone: '''
          });
        }
       e.preventDefault()
    }
}
  return (
     <form onSubmit = {handleSubmit}>
         <input type = 'text' placeholder = 'Add name' onChange={handleChange}
         name = 'name' value={state.name} /><br/>
         <input type = 'text' placeholder = 'Add age' onchange={handleChange} 
         name = 'age' value = {state.age} /><br />
         <input type = 'text' placeholder = 'Add location' onChange={handleChange}
         name = 'location' value= {state.location}/><br />
         <input type = 'text' placeholder='Add phone' onChange={handleChange}
         name = 'phone' value={state.phone} /> <br/>
         <button type = 'submit'>Add</button>
   );
}
function PeopleList(props){
   const arr = props.data;
   const listItems = arr.map((val, index) =>
       <li key={index}>{val}</li>
       );
   return <ul>{listItems}</ul>;
}
function ContactManager(props){
   const[contacts, setContacts] = useState(props.data)
   function addPerson(state){
      setContacts([...contacts, state]);
   }
   return(
      <div>
         <AddPersonForm handleSubmit = {addPerson}/>
         <PeopleList data = {contacts}/>
      </div>
   );
}
const contacts = [{name:'james smith', age:'23', location:'uk', phone:'09157364496'}, 
{name:'bruce wayne', age :'27', location: 'nigeria', phone:'08130058157'},
{name:'bruce wayne', age :'27', location: 'nigeria', phone:'08130058157'},];
ReactDOM.render(<ContactManager data = {contacts}/>,
 document.getElementById('root'));

there are three components namely; AddPersonForm, PeopleIst, and ContactManager AddPersonForm is a form with the text field and add button and uses state to manage the value of the text field PeopleList is a list of contacts and receives an array representing the contacts and renders a list on the page ContactManager includes the AddPersonForm and PeopleList as child components and holds the contact list in its state. It receives the initial contacts list using props, saves it in its state and passes down the contacts list to the child component.

Answer

You have three quotes for phone key when setting the state in handleSubmit function, this gives an error.

You have missed the closing tag for <form> component inside AddPersonForm.

You have an extra curly bracket before the return statement of AddPersonForm.

Inside PeopleList component where you have mapped the listItems you are directly trying to render val, which is a contact object, inside li. React is complaining for that and you get error in console:

Objects are not valid as a React child (found: object with keys {name, age, location, phone}).

So maybe change it to something like {val.name} and it’ll work.

Advertisement

Answer