title: How can I separate the JSX mapping logic from the mapped array containing components with props?
body: <p>I have a component that maps over an array of components that have props passed into them, something along these lines:</p>
  <pre><code>const Component = (prop0, prop1, prop2) =&gt; {
  
    const array = [
      {
        id: 0,
        component: &lt;SubComponent0 prop0={prop0}&gt;
      },
      {
        id: 1,
        component: &lt;SubComponent1 prop1={prop1}&gt;
      },
      {
        id: 2,
        component: &lt;SubComponent2 prop2={prop2}&gt;
      }
    ];
  
    return (
      {array.map(obj =&gt; 
        &lt;div key={obj.id}&gt;
          {obj.component}
        &lt;/div&gt;
      )}
    );
  };
  
  export default Components;
  </code></pre>
  <p>I would like to separate the array into its own JS file that I import in, which worked fine for me in other cases where the components involve no props, but in this case I run into the problem of the props being undefined outside of the scope of this functional component, and I can't figure out how I can import/pass those props into the new JS file where I put the array. Is that possible to do, or is there another way for me to move the array into a separate file? Thanks.</p>