How to add data in array in form state in React

Problem Screenshot

I am trying to use the form to add data to the form data I want the question to go into question as shown in the form data then I want the options to go into the options array as `

{ letter: "A", answer: "", isTrue: false },
      { letter: "B", answer: "", isTrue: false },
      { letter: "C", answer: "", isTrue: false },
      { letter: "D", answer: "", isTrue: false },

` but I am finding difficult The questions can be added and dynamically and changing just the questions works individually but I can't get to do the same for the options Please help me achieve this, even if it can be done in another totally different way

  const [questionId, setQuestionId] = useState(0);
  const [questions, setQuestions] = useState({});

  const [form, setForm] = useState([]);
  const [opt, setOpt] = useState([]);

  const opts = ["A", "B", "C", "D"];

  const handleAddData = (e) => {
    e.preventDefault();
    const inputState = {
      question: "",
      options: [],
    };
    setForm((prev) => [...prev, inputState]);
  };

  const addOpt = () => {
    const initialState = {
      letter: "",
      answer: "",
      isTrue: false,
    };

    setOpt((prev) => [...prev, initialState]);
    opt.filter((item) => item.letter !== "");
    console.log(opt.filter((item) => item.letter !== ""));
  };

  const handleRemove = (index, e) => {
    e.preventDefault();

    setForm((prev) => prev.filter((item) => item !== prev[index]));
  };

  const onChange = (index, e) => {
    e.preventDefault();
    e.persist();

    setForm((prev) => {
      return prev.map((item, i) => {
        if (i !== index) return item;
        console.log(item);
        item.options.map((op, ind) => {
          console.log(`${op}: ${ind}`);
        });
        return {
          ...item,
          [e.target.name]: e.target.value,
          options: opt.filter((item) => item.letter !== ""),
        };
      });
    });
  };
  const onOptChange = (e, index) => {
    e.preventDefault();
    e.persist();
    let opt = e.target.placeholder.slice(-1);
    console.log(opt);

    let options = [
      { letter: "A", answer: "", isTrue: false },
      { letter: "B", answer: "", isTrue: false },
      { letter: "C", answer: "", isTrue: false },
      { letter: "D", answer: "", isTrue: false },
    ];
  };

  return (
    <Container>
      <Segment>
        <Item.Group>
          <Item>
            <Item.Content>
              <Form>
                {JSON.stringify(form)}
                {form.map((item, index) => (
                  <>
                    <Card.Group key={index}>
                      <Card fluid color="red" className="p1">
                        <Form.TextArea
                          label="Question"
                          placeholder="Enter Question"
                          name="question"
                          value={item.question}
                          onChange={(e) => onChange(index, e)}
                        />
                        <Form.Group widths="equal">
                          <Form.Field>
                            <Input
                              label="Option A"
                              placeholder="Enter Option A"
                              key={index}
                              fluid
                              name="answer"
                              onChange={(e) => onOptChange(e)}
                            />
                          </Form.Field>
                          <Form.Field>
                            <Input
                              label="Option B"
                              placeholder="Enter Option B"
                              key={index}
                              fluid
                              name="answer"
                              onChange={(e) => onOptChange(e)}
                            />
                          </Form.Field>
                        </Form.Group>

                        <Form.Group widths="equal">
                          <Form.Field>
                            <Input
                              label="Option C"
                              placeholder="Enter Option C"
                              key={index}
                              fluid
                              name="answer"
                              onChange={(e) => onOptChange(e)}
                            />
                          </Form.Field>
                          <Form.Field>
                            <Input
                              label="Option D"
                              placeholder="Enter Option D"
                              key={index}
                              fluid
                              name="answer"
                              onChange={(e) => onOptChange(e)}
                            />
                          </Form.Field>
                        </Form.Group>
                        <Form.Field>
                          <Input
                            label="Correct Answer"
                            placeholder="Enter Correct Answer"
                            fluid
                            name="correct_answer"
                          />
                        </Form.Field>
                      </Card>
                    </Card.Group>
                    <Button
                      // primary
                      size="small"
                      icon="minus"
                      labelPosition="right"
                      content="Remove"
                      className="mt-2"
                      color="red"
                      onClick={(e) => handleRemove(index, e)}
                      // disabled={!allFieldsSelected || processing}
                    />
                    <Divider />
                  </>
                ))}
                <Button
                  primary
                  size="small"
                  icon="plus"
                  labelPosition="right"
                  content="Add"
                  className="mt-2"
                  onClick={handleAddData}
                />
              </Form>
            </Item.Content>
          </Item>
        </Item.Group>
      </Segment>
      <br />
    </Container>

I tried using this onOptChange below to change the options array individually but couldn't get a good result

const onOptChange = (e, index) => {
    e.preventDefault();
    e.persist();
    let opt = e.target.placeholder.slice(-1);
    console.log(opt);

    let options = [
      { letter: "A", answer: "", isTrue: false },
      { letter: "B", answer: "", isTrue: false },
      { letter: "C", answer: "", isTrue: false },
      { letter: "D", answer: "", isTrue: false },
    ];
  };

Via Active questions tagged javascript - Stack Overflow https://ift.tt/iKLH3bx