Seeking assistance with dynamically pushing new items to a deeply nested choice array in order to render react native TextInput components using the map function. Below, you will find details on the data structure, reducer design, and other relevant code snippets.
Use case scenario:
UI:
Question: _________
Choice: _________ Add more choices
Right Choice: _________ Dropdown menu populated from choice array
Next Add New Question
Upon clicking 'add new question', a new object is added from dynamicMCQGenerationDataFormat[0], each containing two questions with properties such as question, choice, and right choice. This setup necessitates adding new items to the choice array and eventually updating their content as well.
The data structure dynamicMCQGenerationDataFormat looks like this:
[
{
"question": "What",
"choice": ["choice"],
"rightChoice": ""
}
]
Reducer snippet:
import {
EXAM_UPDATE,
REFRESH_EXAM,
INSERT_NEW_QUESTION,
INSERT_NEW_CHOICE,
UPDATE_QUESTION
} from '../actions/types';
import dynamicMCQGenerationDataFormat from '../assets/MCQGenerationFormat/dynamicMCQGeneration.json';
const INITIAL_STATE = {
description: "",
level: "",
status: "",
mcq: dynamicMCQGenerationDataFormat
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
// Reducer logic here
}
};
Action Creator excerpt:
import { Actions } from 'react-native-router-flux';
import {
EXAM_UPDATE,
EXAMS_FETCH_SUCCESS,
INSERT_NEW_QUESTION,
UPDATE_QUESTION,
INSERT_NEW_CHOICE
} from './types';
// Action creator functions defined here
Snippet showing how the action creator is called in a React Native component:
pushNewQuestion() {
this.props.insertNewQuestion(dynamicMCQGenerationDataFormat[0]);
}
This showcases the structure of dynamicMCQGenerationDataFormat used for inserting new questions.