Question 230463 in React native Question posted in
The official React Native documentation can be found here.

React native – Instantiating a react component within

I have the following in a React native application:

        <View>
          {objects.map((wc, index) =>
            MyChildComponent(wc, index)
          )}
        </View>

I want to add a key to include with each MyChildComponent generated by the map().
Something like:

<MyChildComponent(wc, index) key={index} />

However, the code as it is now calling MyChildComponent as a function that returns JSX, it is not enclosed in tags.

What is the correct way to refactor the code to include a key?

Thanks

Tags:

2

Answers


  1. 0

    To include a key for each dynamically generated component in React Native, you should enclose the component in JSX tags and pass the key prop to it. Since you mentioned that MyChildComponent is a function that returns JSX, you can refactor your code like this:

    <View>
  {objects.map((wc, index) => (
    <MyChildComponent key={index} wc={wc} index={index} />
  ))}
</View>

    In this example, wc and index are passed as separate props to MyChildComponent. Make sure to modify the MyChildComponent implementation to accept these props as well:

    function MyChildComponent({ wc, index }) {
  // Your component's code here using wc and index
}

    By enclosing the function call in JSX tags and passing the key prop, React Native will properly manage the rendering of your dynamically generated components and associate the key with each one.

    Login or Signup to reply.
  2. 0

    Maybe you should refactor your component to receive props instead of args? because here it looks like a regular js function.
    something like this:

    const MyChildComponent = ({wc, index}) => {
 // ...
}

    Then call it this way:

    <View>
  {objects.map((wc, index) =>
     <MyChildComponent key={index} index={index} wc={wc} />
  )}
</View>

    Or just do this if you don’t want to mess with your component code

    <View>
{objects.map((wc, index) =>
   <div key={index}>
    { MyChildComponent(wc, index) }
   </div>
)}
</View>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search