How to pass props only to first element in array of React elements?

Question

How can I pass a prop only to the first element in an array of React elements of unknown elements? For example, in the following snippet, elements is an array of up to 3 customized Bar elements, and I would like only the first to be passed an arbitrary prop.

function Foo(props) {
  const myProp = 'test';
  const elements = [
    (isP && <Bar prop1={'p'} />),
    (isQ && <Bar prop1={'q'} />),
    (isR && <Bar prop1={'r'} />),
  ].filter(x => x);
  // Now do something like 'elements[0].props.myProp = myProp'
  return elements;
}

The context for this is that I'd like to show three panels in a sidebar. The first should show its title and body, and the others should only show their title.

Some solutions I've considered but don't like:

1) Use React's cloneElement method to clone the first element and pass it a prop. 1 But it seems like poor form to clone a React element just to set a single prop.

2) Preprocess the boolean logic to determine which element would be first, and then assign the prop. For example, something like the code below except with more clever logic:

function Foo(props) {
  const myProp = 'test';
  const elements = [
    (isP && <Bar myProp={isP && myProp}/>),
    (isQ && <Bar myProp={!isP && isQ && myProp} />),
    (isR && <Bar myProp={!isP && !isQ && isR && myProp} />),
  ].filter(x => x);
  return elements;
}

Ideally, the solution would accomplish the goal efficiently and concisely. If there is no better solution than (1) or (2) though, I'd also accept that as an answer.

EDIT: some points I forgot to clarify.

• I am using Redux in case that's helpful to take into account.
• The instances of <Bar /> actually are multiple types (e.g. Bar, Bas, Baz) in case that materially affects the answer. (I mistakenly oversimplified the original question.)

Answer 1

I think I'd keep it simple and use push:

function Foo(props) {
  const myProp = 'test';
  const elements = [];
  if (isP) {
      elements.push(<Bar myProp={myProp}/>);
  }
  if (isQ) {
      elements.push(elements.length ? <Bar/> : <Bar myProp={myProp}/>);
  }
  if (isR) {
      elements.push(elements.length ? <Bar/> : <Bar myProp={myProp}/>);
  }
  return elements;
}

If it's okay for myProp to be falsy, those last two get simpler:

  // ...
  if (isQ) {
      elements.push(<Bar myProp={elements.length || myProp}/>);
  }
  // ...

If falsy isn't okay but undefined is:

  // ...
  if (isQ) {
      elements.push(<Bar myProp={elements.length ? undefined : myProp}/>);
  }
  // ...

Granted it's not particularly pretty. :-) Or a loop:

function Foo(props) {
  const myProp = 'test';
  const elements = [];
  for (const flag of [isP, isQ, isR]) {
      if (flag) {
          elements.push(elements.length ? <Bar/> : <Bar myProp={myProp}/>);
      }
  }
  return elements;
}

(Again with the possible avoidance of the conditional operator depending on the rules for myProp.)

If you need that prop1 with 'p', 'q', or 'r' that's in the first code block in the question but not the second, it's easily done with a loop over an array of objects:

function Foo(props) {
  const myProp = 'test';
  const elements = [];
  const specs = [
    [isP, 'p'],
    [isQ, 'q'],
    [isR, 'r']
  ];
  for (const [flag, prop1] of specs) {
      if (flag) {
          elements.push(elements.length ? <Bar prop1={prop1}/> : <Bar prop1={prop1} myProp={myProp}/>);
      }
  }
  return elements;
}

(Again with the possible avoidance of the conditional operator depending on the rules for myProp.)

Etc.

Answer 2

I can't help but think this is an XY Problem. If you show us actual code, we can probably help you a lot more effectively.

Anyway, if we're stabbing in the dark, here's another way you could do it using destructuring assignment. If isP and isQ and isR are all false, an empty array will be returned.

const Foo = (props) =>
{ const specs =
    [ [ isP, 'p' ]
    , [ isQ, 'q' ]
    , [ isR, 'r' ]
    ]

  const [ first, ...rest ] =
    specs.reduce
      ( (acc, [ flag, prop ]) =>
          flag ? [ ...acc, prop ] : acc
      , []
      )

  if (first === undefined)
    return []

  return (
    [ <Bar myProp={myProp} prop={first} />
    , ...rest.map (prop => <Bar prop={prop} />)
    ]
  )
}

You said that the components and props can be different for each condition. In such a case, you can modify the program to support your unique needs -

const Foo = (props) =>
{ const specs =
    [ [ isP, Bar, { prop: 'r' } ]
    , [ isQ, Qux, { prop: 'q', another: 'a' } ]
    , [ isR, Rox, { prop: 'r' } ]
    ]

  return specs
    .filter
      ( ([ flag, _0, _1 ]) => flag
      )
    .map
      ( ([ _, Comp, props ], i) =>
          i === 0
            ? <Comp {...props} myProp={myProp} />
            : <Comp {...props} />
      )
}

Answer 3

As indicated redux is being used, the source data should ideally be precomputed by calling a function in the reducer to make the array the correct length, and set the props if/when needed. This will mean unneccessary computation inside the component that will have to render on any component update.

myArr: [
  { id: 0, someProp: { msg: 'hello' } },
  { id: 1: someProp: {} },
  { id: 2: someProp: {} }
]

or

myArr: [
  { id: 1, someProp: { msg: 'hello' } },
  { id: 2: someProp: {} }
]

and then the component simply needs to do

const Foo = (props) => {
  const { myArr } = props;
  return (
    <div>
      {
        myArr.map(item => (
          <Bar key={item.id} {...item.someProp} />
        ))
      }
    </div>
  );
};

Edit: If different types are needed the following could be used in a common lib file.

export const COMPONENT_TYPE = {
  BAR: 'BAR',
  BAS: 'BAS',
  BAZ: 'BAZ'
};

and now

import { COMPONENT_TYPE: { BAR, BAS, BAZ } } from '../common';

myArr: [
  { id: 0, someProp: { msg: 'hello' }, componentType: BAR  },
  { id: 1: someProp: {}, componentType: BAS },
  { id: 2: someProp: {}, componentType: BAZ }
]

Now in our component

import { COMPONENT_TYPE: { BAR, BAS, BAZ } } from '../common';

const Foo = (props) => {
  const { myArr } = props;
  return (
    <div>
      {
        myArr.map(item => (
          <div key={item.id}>
            { 
              item.componentType === BAR &&
              <Bar {...item.someProp} />
            }
            { 
              item.componentType === BAS &&
              <Bas {...item.someProp} />
            }
            { 
              item.componentType === BAZ &&
              <Baz {...item.someProp} />
            }
          </div>
        ))
      }
    </div>
  );
};

The 3 separate conditionals perform nearly exactly the same as if/else if/else, and are much clearer. If your code will have BAR/BAS/BAZ so similar, you can just do

const Component = item.componentType;
<Component {...item.someProp} />

Inside the map as long as the enum is changed from uppercase to the actual component name