add inputs dynamically react redux

Question

hello I will ask this question again because I still can’t find a answer I try to create a form similar to google form with react and redux

each question is represented by: QuestionCard contains a title and can have several types (short question, long question, choice ,multiple, single choice ...) I manage to add cardQuestion and delete them

my problem is that when I select single choice I want to give the user the possibility to add the number of choices he wants but it does not work

this is my reducer

const initialState = {
    formId: '',
    form: {
        
        title: '',
        description: ''
    },
    basicForm: {
        fullName: '',
        age: '',
       
        saved: false
    },
    cardQuestion: [{
        
        title: '',
        choix: [],
        type: '',
        

    }],
    error: "",
    loading: false,
}

const addRequestReducer = (state = initialState, action) => {

    switch (action.type) {
        case 'SET_STATE':
            return { ...state, ...action.payload }
        default:
            return state
    }
}

i use a global state

and this how i try to add choices

1- i handle change of inputs (each choice) like this :

  const { cardQuestion } = useSelector((state) => state.addRequest)
const choice = cardQuestion.map(e => e.choix)

   const onChangeInput = (i, key, value) => {
        console.log(value)
        dispatch({
            type: 'SET_STATE',
            payload: {
                cardQuestion: cardQuestion.map((elem, index) => {
                    console.log(i)
                    console.log(i === index)
                    if (i !== index) return elem
                    return { ...elem, [`${key}`]: value }
                })
            }
        })
    }

2- use the ChangeInptut like this

<div >{choice.map((elem, i) => <div key={i}>
                            <Input value={elem.choix} onChange={(e) => onChangeInput(i, 'choix', e.target.value)} />
   </div>

3- button to add new input (choice)

<Button onClick={() => dispatch({
                                type: 'SET_STATE',
                                payload: {
                                    cardQuestion: [...cardQuestion, { choix: '' }]


                                }
                            })} >Add</Button>

                        </div>

but it give me results like this :

and when i add a choice in question card1 it is also added in questioncard2

how can i resolve this , any help will be appreciated

why are you not dispatching different types of actions? maybe a good starting point would be to think about what state changes you actually want to happen. — ian
– ian, Commented Mar 11, 2021 at 18:41
i add an index to each cardQuestion: if (i !== index) return elem — Mouna Sis
– Mouna Sis, Commented Mar 11, 2021 at 21:06

Nadia Chibrikova · Accepted Answer · 2021-03-11 20:29:59Z

2

This

cardQuestion: [...cardQuestion, { choix: '' }]

adds a new card without a title or type to the list of cards. If I understand you correctly, you want to add a new choice to an existing card, which will look something like

const newCards = [...cardQuestion]
newCards[currentCardPosition] = {...newCards[currentCardPosition]}
newCards[currentCardPosition].choix = [...newCards[currentCardPosition].choix, '' ]

but I don't see where currentCardPosition will come from

answered Mar 11, 2021 at 20:29

Nadia Chibrikova

5,0361 gold badge18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

Mouna Sis Over a year ago

Hello what currentCardPosition represent ?

Nadia Chibrikova Over a year ago

currentCardPosition is the index of the card where you want to add a new choice

Mouna Sis Over a year ago

thank you for your answer but i dont know how to use it

Nadia Chibrikova Over a year ago

I think the problem is you have 2 arrays: cards and choices,but only one index between them. Can you create a sandbox on codepen or similar with your code, so we see how we can add the second index?

Mouna Sis Over a year ago

thank you for your response here is the sandbox but i didn't add the backend, you can find the code above on the file QuestionCard df5kp.csb.app

|

Collectives™ on Stack Overflow

add inputs dynamically react redux

1 Answer 1

18 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Related