Попытка опубликовать данные из компонента ввода в компонент ContactList для отображения в компоненте ContactLists

Question

Я пытался добавить контакт в свой компонент ContactLists из ContactList, который был введен в компонент ввода, но я застрял.Пожалуйста, помогите.Я уже создал шаблон в компоненте ContactList для отображения значения из компонента ввода в компоненте ContactLists, но я не работаю.

//From the ContactList Component

import React from 'react';
import './ContactList.css';

const ContactList = (props) =>(
<div className="mainContact">
    <div className="contact-list-item">
    <p className="contactAvatar">{props.avatar}</p>
    <div className="contact-details">
        <p>{props.name}</p>
        <p>{props.email}</p>
    </div>

    <button className="btn-remove">{props.delete}</button>
</div>
</div>
)


export default ContactList;



//From the Input Component


import React from 'react';
import './Input.css';

   const Input = (props) =>{

let inputElement = (
    <input className="contactForm"
        onChange={props.changed} 
        {...props.elementConfig}
        type={props.elementType}
        value={props.value}/>
)


return(<div>
        <label>{props.label}</label>
        {inputElement}
</div>);
}



export default Input;

// From the ContactLists Component



import React, { Component } from 'react';
import oluAvatar from './../assets/wimb.jpg';
import Input from '../components/ContactForm/Input';
import ContactList from '../ContactLists/contactList/ContactList';

class ContactLists extends Component{

    state = {
    contacts : {
                name: {
                    label: 'Name:',
                    elementType: "input",
                    elementConfig: {
                        type: "text",
                        placeholder: 'Gerald Olumide'
                    },
                    value: ""
                },
                phone: {
                    label: 'Phone:',
                    elementType: "input",
                    elementConfig:{
                        type: "number",
                        placeholder: '09087647732'
                    },
                    value: ""
                },
                address:{
                    label: 'Residence:',
                    elementType: "input",
                    elementConfig:{
                        type: "text",
                        placeholder: "Lekki, Lagos State, Nigeria"
                    },
                    value: ""
                },
                email: {
                    label: 'Email:',
                    elementType: "input",
                    elementConfig:{
                        type: "email",
                        placeholder: 'lucignation@gmail.com'
                    },
                    value: ""
                },
                dp: {
                    elementType: "file",
                    elementConfig:{
                        type: "file",
                        placeholder: ''
                    },
                    value: ""
                }
}
}

changedInputHandler = (event, index) =>{
    const newContact = {
        ...this.state.contacts
    }
    const contactDetail = {
        ...newContact[index]
    };
    contactDetail.value = event.target.value;

    newContact[index] = contactDetail
    this.setState({contacts : newContact});
}

submitHandler = (event, identifier) =>{
    const contacts = {
        ...this.state.contacts
    }

    const contactArray = {
        ...contacts[identifier]
     }
    contactArray.value = event.target.value
    contacts[identifier] = contactArray
    this.setState({contacts : contacts})
}

    render(){

        const contactArray =  this.state.contacts;

        const InputArray = [];
        for(let _input in contactArray){
            InputArray.push({
                id: _input,
                config: contactArray[_input]
            });

        }



        let Form = (

            <form onSubmit={this.submitHandler}>

                <h1>Fill out this blank spaces: </h1>
                {InputArray.map(contactKeys =>(
                    <Input key={contactKeys.id} 
                    elementConfig={contactKeys.config.elementConfig}
                    elementType = {contactKeys.config.elementType}
                    value={contactKeys.config.value} 
                    label={contactKeys.config.label}
                    changed={(event) => this.changedInputHandler(event, 
contactKeys.id)} />
            ))}

        <button>Add Contact</button>
        </form>
    )

    const postContact = []
    for(let contact in this.state.contacts){
        postContact.push({
            id: contact,
            contactConfig: this.state.contacts[contact]
        })
        return postContact
    }

    let post = (
        <div>
            <h1>My personal Contact</h1>
            {postContact.map(contactKeys =>(
                <ContactList
                    key={contactKeys.id}
                    avatar={contactKeys.contactConfig.dp}
                    name={contactKeys.contactConfig.name}
                    email={contactKeys.contactConfig.email}
                    delete={(event) => this.deleteContactHandler(event, contactKeys.id)}
                />
            ))}
        </div>
    )

    return(
        <div>
            {post}
            {Form}
        </div>
    )
}
}

export default ContactLists;