SurveyPage.js

// DEPENDENCIES
import { React, useState } from 'react';
import { Formik, Form, Field } from 'formik';
// COMPONENTS
import PageOuterWrapper from '../../components/page-outer-wrapper/PageOuterWrapper';
import Header from '../../components/header-component/Header';
import SurveyCheck from './SurveyCheckbox';
//  STYLES
import "../../styles/hideAdSpace.css";
import styles from './Style_SurveyPage';
// HELPERS
import { useMediaQuery, mobileQuery } from "../../helpers/mediaQuery";
import { onMessageChangeHandle } from '../../pagesContentWrappers/giving-feedback-wrapper/helpers/Helpers_GivingFeedbackWrapper';

const SurveyPage = () => {
  let isMobile = useMediaQuery(mobileQuery);

  const [answer, setAnswer] = useState([]);
  const handleChange = event => {
    setAnswer(event.target.value)
 }

  const labels = [
                  'Answer number 1',
                  'Answer number 2',
                  'Answer number 3',
                  'Answer number 4',
                  'Answer number 5'];


  return (
    <PageOuterWrapper>
      <div
        style={isMobile ? styles.givingFeedbackMob : styles.givingFeedback} >
        <Header />
        <h3
          style={isMobile ? styles.h3Mobile : styles.h3}>
          Feedback.exchange/SURVEY
        </h3>
        <Formik initialValues={{
            checked: "",
            textArea: "",
        }}
        onSubmit={(values) => {
          console.log(values);
        }}
        >
          {(values) => (
          <Form
            style={{
              ...isMobile && styles.mobileForm
            }}
            onSubmit={values.handleSubmit}
          >
            <div
              style={{
                ...styles.wrapper,
                ...isMobile && styles.mobWrapper
              }}
            >
              <label
                style={isMobile ? styles.labelMobile : styles.label}>
                1. Question
              </label>
              {labels.map((label, index) => {
                return <SurveyCheck
                  key={index}
                  value={answer}
                  setAnswer={setAnswer}
                  label={label}
                  answer={answer}
                  name="checked"
                  onChange={handleChange}
                />
              })}
            </div>
            <div
              style={{
                ...styles.wrapper, paddingBottom: "4.5%",
                ...isMobile && styles.mobWrapper, paddingBottom: "3.75%",
              }}
            >
              <label
                style={{
                  ...styles.label, padding: "4.53% 0% 2% 5.5%",
                  ...isMobile && styles.labelMobile, padding: "3.9% 0% 1.5% 4.9%",
                }} >
                2. Question
              </label>
              <Field
                style={{
                  ...styles.textArea,
                  ...isMobile && styles.textAreaMobile
                }}
                as="textarea"
                name="textArea"
                placeholder="Write your answer here"
                // value={answer}
                // onChange={(event) =>
                //     onMessageChangeHandle(
                //         answer,
                //         setAnswer,
                //         event,
                //         )
                // }
              />
            </div>
            <div
              style={styles.btnDiv}>
              <button
                style={styles.btn}
                type="submit">
                SUBMIT
                </button>
            </div>
          </Form>
          )}
        </Formik>
      </div>
    </PageOuterWrapper>
  )
}
export default SurveyPage;