addProductForm.js

import _ from 'lodash';
import React,{Component} from 'react';
import {Field, reduxForm, formValueSelector} from 'redux-form';
import Multiselect from 'react-widgets/lib/Multiselect';
import 'react-widgets/dist/css/react-widgets.css';
import { Image, Transformation } from 'cloudinary-react';
import {NavLink} from 'react-router-dom';
import {connect} from 'react-redux';



const renderMultiselect = ({ input, data, valueField, textField }) =>
    <Multiselect {...input}
                 onBlur={() => input.onBlur()}
                 value={input.value || []} // requires value to be an array
                 data={data}
                 valueField={valueField}
                 textField={textField}
    />

const renderImage = ({input, publicId}) =>
        <Image
            {...input}
            cloudName="dxdkjddi2"
            className="cover-image-preview"
            publicId={publicId}
            crop="scale"
            height="200"
            width="250"/>

class AddProductForm extends Component  {
    constructor(props) {
        super(props)

    }


    render() {


        const {handleSubmit, pristine, name, submitting} = this.props;

        // const link = (<div ><NavLink to="/d/tags"/>Create tag</div>)

        return (
            <form onSubmit={handleSubmit}>
                    <div className="form-body">
                        <h3 className="box-title">About Product</h3>
                        <hr/>
                        <div className="row">
                            <div className="col-md-6">
                                <div className="form-group">
                                    <label className="control-label">Product Name</label>
                                        <Field
                                            name="name"
                                            type="text"
                                            component="input"
                                            className="form-control"
                                            placeholder="name"/>
                                </div>
                            </div>
                    <br/>

                    {/*price*/}
                    <div className="col-md-6">
                        <div className="form-group">
                             <label className="control-label">Price</label>
                            <div className="input-group">
                                <div className="input-group-addon"></div>
                                <Field
                                    name="price"
                                    type="number"
                                    component="input"
                                    className="form-control"
                                    placeholder="price"/>
                            </div>
                        </div>
                    </div>
                        </div>

                    {/*quantity*/}
                    <div className="row">
                        <div className="col-md-6">
                            <div className="form-group">
                        <label className="control-label">Quantity</label>
                        <Field
                            name="qty"
                            type="number"
                            component="input"
                            className="form-control"
                            placeholder="Quantity"/>
                            </div>
                        </div>

                    <div className="col-md-6">
                        <div className="form-group">
                    {/*status*/}

                            <label className="control-label">Status</label>

                            <Field
                            name="status"
                            component="select"
                            className="form-control"
                            >
                                <option>Select a status</option>
                                <option>Available</option>
                                <option>Out of Stock</option>
                            </Field>
                        </div>
                    </div>
                            </div>


                        <div className="row">
                            <div className="col-md-6">
                                <div className="form-group">
                                    <label className="control-label">Tax</label>


                                        <Field
                                            name="tax"
                                            type="number"
                                            component="input"
                                            className="form-control"
                                            placeholder="tax"/>
                                    </div>
                            </div>

                            <div className="col-md-6">
                                <div className="form-group">
                            <label className="control-label">Product Tags</label>
                            <label onClick={this.props.toggleAddTagModal}  className="pull-right control-label btn-link">
                                Add New Tag
                            </label>

                            <Field
                            name="tags"
                            component={renderMultiselect}
                            className="form-control"
                            placeholder="Choose a tag"
                            data={this.props.tag}
                            />
                                </div>
                            </div>
                        </div>

                    {/*description*/}
                        <h3 className="box-title m-t-40">Product Description</h3>
                        <div className="row">
                            <div className="col-md-12">
                            <div className="form-group">
                        <Field
                            name="description"
                            component="textarea"
                            rows="4"
                            className="form-control"
                            placeholder="decription"/>
                            </div>
                            </div>
                    </div>

                    <div className="row">
                    <div className="col-md-3">
                        <h3 className="box-title m-t-20">Product Image</h3>
                        <div className="product-img">
                            <Field
                                name="image_link"
                                component={renderImage}
                                className="form-control"
                                publicId={this.props.image_url}
                            />
                            <br/>
                            <div className="pro-img-overlay"><a onClick={this.props.showUploadWidget} className="bg-info">
                                <i className="ti-marker-alt"></i></a>
                                </div>


                            <div className="fileupload btn btn-info waves-effect waves-light">
                                                                        <span><i className="ion-upload m-r-5">

                                                                    </i>Upload Image</span>
                                <input onClick={this.props.showUploadWidget} className="upload"/>
                            </div>
                        </div>
                    </div>
                    </div>
                        <hr/>
                    </div>
                <div className="row">
                <div className="form-actions m-t-40">
                    <button type="submit"
                            className="btn label-custom"
                            style={{color: "white"}}
                            disabled={pristine || submitting}> <i className="fa fa-check">

                    </i> Save {name}</button>{' '}
                    <button type="button" className="btn btn-default">
                        <NavLink style={{color: 'black'}} to="/d/products"> Cancel</NavLink>
                    </button>
                </div>
                </div>
            </form>
        )
    }
};

AddProductForm = reduxForm({
    form: 'addProduct',
})(AddProductForm)

//decorate with connect to read forms
 const selector = formValueSelector('addProduct')
 AddProductForm = connect(
     state => {
         const name = selector(state, 'name')
         return {
            name
         }

     }

 )(AddProductForm)


export default AddProductForm

<label onClick={props.toggleAddTagModal} className="pull-right control-label btn-link"> Add New Tag </label>

`export default const AddProductForm = props => {

}`