Elep

import React from 'react';
import questionWrapper from '../../HOC/QuestionWrapper';

const index = (props) => {

return (
        <form onSubmit={props.handleSubmit}>
            <div className="question">
              <h3 className="question-text">5. Caption these</h3>
              <div className="form-inputs">
                <div className="form-group">
                    <label htmlFor="cap-one">
                        <img src="/images/test/caption1.jpg" alt="Caption One"/>
                    </label>
                    <textarea onBlur={props.postAnswer} type="text" name="captionone" rows="4" id="cap-one" className="input" onChange={props.handleChange} value={props.inputs.captionone || ""} />
                </div>
                <div className="form-group">
                    <label htmlFor="cap-two">
                        <img src="/images/test/caption2.png" alt="Caption two"/>
                    </label>
                    <textarea onBlur={props.postAnswer} type="text" name="captiontwo" rows="4" id="cap-two" className="input" onChange={props.handleChange} value={props.inputs.captiontwo || ""} />
                </div>
                <div className="form-group">
                    <label htmlFor="cap-three">
                        <img src="/images/test/caption3.png" alt="Caption three"/>
                    </label>
                    <textarea onBlur={props.postAnswer} type="text" name="captionthree" rows="4" id="cap-three" className="input" onChange={props.handleChange} value={props.inputs.captionthree || ""} />
                </div>
                <div className="form-group">
                    <label htmlFor="cap-four">
                        <img src="/images/test/caption4.jpg" alt="Caption four"/>
                    </label>
                    <textarea onBlur={props.postAnswer} type="text" name="captionfour" rows="4" id="cap-four" className="input" onChange={props.handleChange} value={props.inputs.captionfour || ""} />
                </div>
              </div>
            </div>
            <div className="pagination">
                <button type="button" className="btn btn-warning" onClick={(e) => props.next(e, 'prev')}>Previous</button>
                <button type="submit" className="btn disabled" onClick={(e) => props.next(e, 'next')}>Next</button>
            </div>
        </form>
    )
}

export default questionWrapper(index)