Parent component returns children's divs one by one

Question

Components A and B return array of divs (which are updated based on global state changes) like so:

// code above

return(
  <>{divArray}</>
)

Component C imports both components and returns them in a div:

// code above
return(
  <div className='CC'>
    <A/>
    <B/>
  </div>
)

In usual render, array of component A will show above array of component B. Is it possible to force div 'CC' to show elements of both arrays one by one, i.e., element of array A, element of array B, element of array A, and so on?

Can I somehow call .map on imported components in return statement of C?

Does this answer your question? [Access children of react element](https://stackoverflow.com/questions/51776533/access-children-of-react-element) — Peter B, Jul 24 '23 at 21:48
Well you could do this one of two ways .. If the index count is the same .. You can simply `map()` the first array and use the `key` to call that `index` in the second array within the loop. Or you can `useEffect` with both arrays passed in and create a single component with all the `divs` that way. — Zak, Jul 24 '23 at 21:48
@PeterB this is too complicated, there should be something easier... — E.Z, Jul 24 '23 at 22:20
I'd say there isn't an easier way. React isn't made for such trickery. Components are meant to render into smaller / lower level components, which may or may not render another layer of children according to the same principle. And you normally don't need to see that from the outside. What I would do if I had this need is to dismantle A and B and create functions instead that just retun the arrays that you want. There is no need for everything to be a JSX component. — Peter B, Jul 24 '23 at 22:40
yeah, that's what I have now, I thought I could make it more sophisticated but can't find it... Will just use useEffects and handle these arrays inside one component, it's much easier... Thanks @PeterB ! — E.Z, Jul 24 '23 at 22:45

Nicolas · Accepted Answer · 2023-07-26T14:02:25.733

4

const C = () => {
  const arrayA = <A/>.type().props.children
  const arrayB = <B/>.type().props.children
   
  return (
    <div className='CC'>
      {
        getAlternatingArray(arrayA, arrayB)
      }
    </div>  
  )
}

const getAlternatingArray = (arrayA, arrayB) => {
    let indexA = 0
    let indexB = 0
    const result = []
    while(indexA < arrayA.length && indexB < arrayB.length) {
      result.push(arrayA[indexA++]);
      result.push(arrayB[indexB++]);
    }
    while(indexA < arrayA.length) {
      result.push(arrayA[indexA++]);
    }
    while(indexB < arrayB.length) {
      result.push(arrayB[indexB++]);
    }
  return result
}

edited Jul 26 '23 at 14:02

answered Jul 24 '23 at 23:14

Nicolas

310
2
11

if this works you're a genuis, will test soon. – E.Z Jul 25 '23 at 17:32
1

It works, here you have a [codepen](https://codepen.io/nicofetter/pen/PoxdmqQ) Anyway Im not a genius haha – Nicolas Jul 25 '23 at 17:38
2

I'm wondering why you use `.map()` because it works even without the .map() and *without* it, things like `style` and `className` that may be on the `
`-s are preserved. WIth the .map() as it is (doing createElement), those props get lost, extra code would need to be added to put it all back in.
– Peter B Jul 25 '23 at 21:28
1

You are right @peter, edited the answer, no need to map thru them. – Nicolas Jul 26 '23 at 14:02

Parent component returns children's divs one by one

1 Answers1