Why my form in ReacJs return empty Json object when I click on submit button?

Question

I am trying to send a value as defaultValue from my input box to another component using a form in ReactJs. This is my form:

    let NameTab = props => {

            const {handleSubmit, reset} = props;
            return (
                <form  className="form" onSubmit={ handleSubmit }>
                    <div className="jumbotron">
                <div>
                            <label>Name</label>
                            <div style={{marginTop: -28, marginLeft: -50}}>
                                <input
                                    style={{marginLeft: 170, width: 350, marginTop: 3, height:30}}
                                    className="control-label"
                                    name="name"
                                    type="text"
                                    defaultValue="Michael"
                                    />
                            </div>
                        </div>
        <button type="submit" className="btn btn-info"
               style={{marginLeft: -60, marginRight: 20, marginTop: 5}}> Submit </button>
        <button className="btn btn-warning" style={{marginLeft: 100, marginTop: 5}}
                onClick={reset}> Reset </button>
             </div>
            </form>
            );
        };

The problem is I am getting an empty Json-object : you submitted: {} Can anyone help me find why the return object is null . I am expecting {"name":"Michael"} . Thanks

Edit

My handleSubmit method:

const showValues = values =>
    new Promise(resolve => {
        setTimeout(() => {  // simulate server latency
            window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
            resolve();
        }, 200);
    });

Answer 1

I guess you need to set InitialValues to redux form instead of a default, try

let NameTab = props => {

            const {handleSubmit, reset} = props;
            return (
                <form  className="form" onSubmit={ handleSubmit }>
                    <div className="jumbotron">
                <div>
                            <label>Name</label>
                            <div style={{marginTop: -28, marginLeft: -50}}>
                                <Field
                                    className="control-label"
                                    name="name"
                                    component="input"
                                    type="text"

                                    />
                            </div>
                        </div>
        <button type="submit" className="btn btn-info"
               style={{marginLeft: -60, marginRight: 20, marginTop: 5}}> Submit </button>
        <button className="btn btn-warning" style={{marginLeft: 100, marginTop: 5}}
                onClick={reset}> Reset </button>
             </div>
            </form>
            );
        };



const mapInitialValues = () => ({
  initialValues: {
    name: "Michael"
  }
});


export default reduxForm({
    form: 'NameTab'
}, mapInitialValues)(NameTab);