How to send data from form fields?

Question

React

Good afternoon.
I need to send values ​​from the pop-up form to the mail through a function (formDataProcessing) written on the side (this is how the site works). I need to pass in it the value from the form fields. Question: How to do it? The form sends, but does not accept fields, undefined comes in the letter.
Form component code:

import React from 'react';
import MaskedInput from 'react-maskedinput';

const FormEmail = (props) => {
    return(
        <div className="form-blank__wrap">
            <form className="form-blank" id="form-price2018">
                <MaskedInput  mask="[phone]" type="text" placeholder={'Телефон*'} size={''} name="phone"
                              id="form-price2018__phone" required="true" className="form-blank__field"/>
                <input className="form-blank__field"
                       id="form-price2018__email" type="email" placeholder={'Email*'} name="email"/>
                <input className="btn" type="submit" value="ЗАБРОННИРОВАТЬ" 
                       onClick={formDataProcessing('Забронировать дом по цене 2018г', '', $('#form-price2018__phone').val(), $('#form-price2018__email').val() ,'','2018','yaTarget')}/>
            </form>
        </div>
    )
};

export default FormEmail;

The code of the component where the form is called:

import React, { Component } from 'react';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {getIdeaSuccess} from "../../../actions/actions";
import Popup from '../../elements/popup/popup';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { formDataProcessing } from '../../elements/forms/form-email/form-email';


class Branding extends Component{

    constructor(props) {
        super(props);
        this.state = {
            popupGetIdea: false,
            popupKnow: false
        };
    }



    sendPopupKnow () {
        this.setState({formDataProcessing: true});
        this.props.getIdeaSuccess(true);
    }

    openPopupGetIdea() {
        this.setState({popupGetIdea: true});
        yaCounter21935674.reachGoal('zabronirovat-dom-form');
    }
    closePopupGetIdea() {
        this.setState({popupGetIdea: false});
        this.props.getIdeaSuccess(false);
    }

    openPopupKnow() {
        this.setState({popupKnow: true});
    }
    closePopupKnow() {
        this.setState({popupKnow: false});
    }

    render() {
        return(
            <section className="branding">
                <div className="container branding__wrap">
                    <div className="branding__item">
                        <div className="branding--logo">
                            <div className="branding--logo__item">
                                <h1 className="branding__title">
                                    КУПИ СЕЙЧАС,<br/>
                                    ПОСТРОЙ ВЕСНОЙ
                                </h1>
                            </div>
                            <div className="branding--logo__item">
                                <div className="square"></div>
                            </div>
                        </div>
                    </div>
                    <div className="branding__item">
                        <p className="branding__desc">
                            Всё дорожает... К сожалению, и мы не в силах сдерживать рост цен.
                        </p>
                        <p className="branding__desc">
                            В связи с повышением <span>НДС с 1 января 2019 г.,</span> повышаются цены на стройматериалы
                            на <span>15%.</span>
                        </p>
                    </div>
                </div>
                <div className="order">
                    <h2 className="order__title">
                        УСПЕЙТЕ ЗАБРОНИРОВАТЬ ДОМ<br/>
                        ИЗ КЛЕЁННОГО БРУСА <span>ПО ЦЕНАМ 2018 г.</span>
                    </h2>
                    <button className="branding__btn" onClick={this.openPopupGetIdea.bind(this)}>
                        <p>
                            <FontAwesomeIcon icon="check" />
                        </p>
                        <p>
                            ЗАБРОНИРОВАТЬ ДОМ ПО ЦЕНЕ 2018 г.
                        </p>
                    </button>
                    <p onClick={this.sendPopupKnow.bind(this)} className="order__link">
                        УЗНАТЬ ПОДРОБНЕЕ
                    </p>
                </div>
                <Popup
                    title={'Забронировать дом по цене 2018г'}
                    area={'popup-form'}
                    state={this.state.popupGetIdea}
                    close={this.closePopupGetIdea.bind(this)}
                    type={'email'}
                    notification={this.props.isNotification}
                    formClick={this.sendPopupKnow.bind(this)}
                />
                <Popup
                    state={this.state.popupKnow}
                    area={'popup-form form-branding'}
                    close={this.closePopupKnow.bind(this)}
                    type={'know'}
                    notification={this.props.isNotification}
                />
            </section>
                )
    }
}


export function mapStateToProps(store) {
    return {
        isNotification: store.mainReducer.isGetIdeaNotification
    }
}

export const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({getIdeaSuccess}, dispatch)
};

export default connect(mapStateToProps, mapDispatchToProps)(Branding);

Answer 1

I did not find something in the second component, neither importing the form, nor using it. I only see the formDataProcessing import, which is not declared in the first file. Wonder how this code even compiles?