Getting id value and setting it in state in react

Question

I have reusable Dropdown component which I use in my parent component

class Dropdown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowing: false,
            listData: this.props.data,
            chosenValue: this.props.date ? this.props.date : "Izaberi"
        }
    }

    componentDidMount() {
        document.addEventListener('mousedown', this.handleClickOutside);
    }

    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClickOutside);
    }

    handleClickOutside = () => {
        this.setState({ isShowing: false })
    }

    handleClick = () => {
        this.setState({ isShowing: true })
    }

    handleChange = (e, data) => {
       e.stopPropagation();
       this.setState({ chosenValue: data })
       this.props.handleChange(e, data);
    }

    render() {
        return (
            <div className="input-with-arrrow">
                <input type="text" className="form-input toggle-popup" value={this.state.chosenValue} onChange={this.handleChange} onClick={this.handleClick} />
                <div className="popup" style={{ display: this.state.isShowing ? "block" : "none" }}>
                    <ul>
                        {
                            this.props.data.map((item, key) => {
                                return <li className="popup-items" key={key} id={item.id} onMouseDown={(e) => this.handleChange(e, item.name)}>{item.name}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

export default Dropdown;

My parent component looks like this

class SingleCallView extends React.Component {
    constructor(props) {
        super(props);
        this.handleChangeInput = this.handleChangeInput.bind(this);

    }

    state = {
        contact_type: '',
        call_type: ''
    };


    componentWillMount() {
        this.props.fetchForm();
    }


    handleChangeInput = (event, data) => {
        const target = event.target;
        const name = target.name;
        const value = target.value;
        this.setState({ [name]: value });
    };

    render() {

        const [call_types, contact_types] = this.props.formData;
        return (
                                <Dropdown id="contact_type" data={contact_types} handleChange= {this.handleChangeInput} />

                                <Dropdown id="call_type" data={call_types} handleChange={this.handleChangeInput} /> <br />

        )
    }
}

const mapStateToProps = state => ({
    formData: state.formData.formData,
    calls: state.calls.calls
});

export default connect(
    mapStateToProps,
    { fetchForm, addCall }
) 
(SingleCallView);

Arrays that I'm passing to dropdown component have objects with attributes ("id", "name"), I can open dropdown and see list of names, select it, and change chosenValue. I need to change state in my parent component, so that this.state.contact_type gets ("id") value

Answer 1

I solved this by adding method handleDropdown in my child and parent component

//child
handleDropdown = (event) => {
        const {value} = event.target;
        this.props.onChange(value);
    };

//add to input element
onChange={this.handleDropdown}
//add to li element
id={this.props.id}

//add to parent component
handleDropdown = (event, data) => {
        const target = event.target;
        const name = target.id;
        const value = target.value;
        this.setState({ [name]: value });
    };
//<Dropdown> should look like this
<Dropdown data={contact_types} id={'contact_type'} handleChange={this.handleDropdown} onChange={this.handleDropdown}/>