show dynamically the steps

[hanaechahid]

hello, I have quizz array and i want to show the steps depending on the length and content of the array. So what I did is:

<ProgressSteps
       ref={ref => { this.progressSteps = ref }}
       activeStep={this.state.activeStep}>
       { this.state.quizz.map((quiz, i) => {
                return  (
                    <ProgressStep label={quiz.name}
                         nextBtnStyle={styles.nextBtn} nextBtnTextStyle={styles.btnText}
                         scrollViewProps={this.defaultScrollViewProps}>
                    // some other elements
                  </ProgressStep>
                )
         }
 </ProgressSteps>

but I get this error :

Unhandled JS Exception: Invariant Violation: Invariant Violation: React.cloneElement(...): The argument must be a React element, but you passed undefined.

can anyone help me?!

[hanaechahid]

@colbymillerdev help please !!!

[r083rt]

Try wrap the ProgressStep in a Fragment and add quiz.name as the key.

<ProgressSteps
       ref={ref => { this.progressSteps = ref }}
       activeStep={this.state.activeStep}>
       { this.state.quizz.map((quiz, i) => {
                return  (
                   <Fragment key={quiz.name}>
                           <ProgressStep label={quiz.name}
                              nextBtnStyle={styles.nextBtn} nextBtnTextStyle={styles.btnText}
                              scrollViewProps={this.defaultScrollViewProps}>

                            </ProgressStep>
                  </Fragment>
                )
         }
 </ProgressSteps>

[minahilfaysl]

@colbymillerdev hello, were you able to find a solution to this?