Can I use a CopilotStep inside a map Item

[dekm]

Current Behavior A clear and concise description of the behavior.

I have an item which is part of my next step that resides inside a map. What I need to do is highlight one of the first items to describe it's purpose. Does anyone have experience doing this? Input Code

`<View style={{ flex: 1 }}>
              {this.props.foods.map((item, i) => (

                <Accordion title={item.name} data={item} value={false} key={item.id} number={i} />
              ))}
            </View>`

Expected behavior/code

For my step 2 I need this to happen inside a mapped Component. For example inside <Accordion /> item 1.

Environment

• "react-native-copilot": "^2.4.6",
• "expo": "^35.0.0",
• "react-native-svg": "~9.9.2",

Additional context/Screenshots Below is a screenshot of the items list I need to be highlighted as step 2.

[blazk0]

I have attempted to do this and stumbled with the same situation as well. The way i see it there are 3 solutions :- 1 - You can wrap the entire view wrapping the map items with CopilotView. 2- You can wrap the single map item but in this case it will wrap the last item in the array. 3- You can create a mock up screen exactly like this screen, but of cource its all static, So you can wrap any child element.

I went with solution no. 3 as that was what i needed in my use case.

[ncoen97]

What I did to solve this problem was something like this: list.map((item, index) => item === 0 ? (<CopilotStep ... > <Component /> </CopilotStep>) : (<Component />))