Javascript - How to store user input using React state with dynamic number of questions

GabrielChan
October 5, 2024
209 views
0 votes
2 Answers

I’m trying to create a form and store the user inputs for each textfield into states. The questions will be retrieved from an external source so I store all of them into an object where the questions and answers are represented as key-value pairs. The problem with this implementation is that I can’t type anything into the textfields. They all remain empty no matter what I type.

import Box from "@mui/system/Box";
import Stack from "@mui/system/Stack";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import TextField from "@mui/material/TextField";
import { useState } from "react";
import HRMButton from "../Button/HRMButton";
import { fonts } from "../../Styles";


export default function OnboardingSurvey({prev, next, style}) {
    //The form could contain any number of questions not just the four used in this example
    const [form, setForm] = useState({
        "What suggestions do you have for improving the company culture or work environment?": "",
        "Do you have any feedback on your manager or team that you'd like to share?": "",
        "How was your experience working here?": "",
        "Is there anything else you would like to share that we haven't discussed?": "" 
    });

    return (
        <Box sx={{...{
            border: "1px solid #EBEBEB",
            borderRadius: "10px",
            minWidth: "1003px",
            paddingX: "113px",
            paddingY: "63px",
            fontFamily: fonts.fontFamily
        }, ...style}}>
            <h4 style={{textAlign: "center", marginTop: 0}}>Please answer the questions below as detailed as possible</h4>
            <p style={{textAlign: "center", marginBottom: "50px"}}>
                Your answers are going to be used to further improve our process.
            </p>
            {Object.keys(form).map((question) => (
                <>
                    <p style={{textAlign: "left"}}>{question}</p>
                    <TextField 
                        id={`${question}-textfield`}
                        value={form[question]}
                        placeholder={"Your answer here"}
                        onChange={(e) => {
                            setForm({
                                ...form,
                                question: e.target.value
                            });
                        }}
                        rows={4}
                        multiline
                        sx={{
                            marginBottom: "50px",
                            width: "100%"
                        }}
                    />
                </>
            ))}
            <Stack direction="row" alignContent="center" justifyContent="space-between">
                <HRMButton mode="secondaryB" startIcon={<ArrowBackIcon />} onClick={prev}>Previous</HRMButton>
                <HRMButton mode="primary" onClick={next}>Save and next</HRMButton>
            </Stack>
        </Box>
    );
};

Tags: javascript reactjs

Answers

You could try this

{Object.keys(form).map((question) => (
  <>
      <p style={{textAlign: "left"}}>{question}</p>
      <TextField 
          id={`${question}-textfield`}
          value={form[question]}
          placeholder={"Your answer here"}
          name={question}
          onChange={(e) => {
              setForm(formState => ({
                ...formState,
                [e.target.name]: e.target.value
            }));
          }}
          rows={4}
          multiline
          sx={{
              marginBottom: "50px",
              width: "100%"
          }}
      />
  </>
))}

- WeDoTheBest4You
- October 5, 2024 at 5:55 am
- 0 votes
0
There is a very minor syntactical error.
The Computed Property Name must be enclosed in square brackets.

The below code uses a hard coded property name "question".
```
onChange={(e) => {
   setForm({
   ...form,
   question: e.target.value
   });
}}
```
For Computed Property Names, it must be enclosed in square brackets as below. This will evaluate the variable question, and the result will be the property name.
```
onChange={(e) => {
   setForm({
   ...form,
   [ question ]: e.target.value
   });
}}
```
Trial run

Browser display – Questions and Answers

Console log of the state – form object
Login or Signup to reply.