Ndtyjky

Currently I have the following

methodName = () => {

  const {

    collectionOfComponents

    ...

    ...

  } = this.props;



  return (

    <Wrapper1>

      {collectionOfComponents.map((oneComponent, index) => (

        <Wrapper2

          ..props

        >

          {oneComponent.component}

        </Wrapper2>

      )}

    </Wrapper1>

  );

};

And for collectionOfComponents I am passing in the following

collectionOfComponents={[

<ComponentOne prop1... prop2... />,

<ComponentOne prop1... prop2... />,

<ComponentTwo prop1... prop2... />

]}

Is there a way to identify when ComponentTwo has been passed through so that I can perform a different render. I'm not sure how to do this

EDIT
Sorry, should of made this clear, but i'm not looking to change the render method in the map i'm looking for a separate function to first check to see if componentTwo exists in the array at any time and then (maybe) use a tertiary to call one of two methods which will be two different return methods. I will then call the function in the render method

When you use a component, React creates an Element. Each element has a type property. The type is the class of function for component elements, or a string for DOM elements ('button').

To find the component that created the element, compare the type of the element to the Function of Class that created it:

const ComponentOne = () => 1;

const ComponentTwo = () => 2;

class ComponentThree extends React.Component {

  render() {

    return 3;

  }

}



const Wrapper = ({ children }) => (

  <div>

  {React.Children.map(children, (El) => {

    switch(El.type) {

      case ComponentOne:

        return <div className="red">{El}</div>;

      case ComponentTwo:

        return <div className="blue">{El}</div>;

      case ComponentThree:

        return <div className="green">{El}</div>;

    }

    

    return null;

  })}

  </div>

);



ReactDOM.render(

  <Wrapper>

    <ComponentOne />

    <ComponentOne />

    <ComponentTwo />

    <ComponentThree />

  </Wrapper>,

  demo

);

.red { background: red; }

.blue { background: blue; }

.green { background: green; }

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

const isComponentTwo = collectionOfComponents.some(component => component.type.displayName.includes('ComponentTwo'));

The above will return true if at least one component in the collectionOfComponents is ComponentTwo.

This is not advisable however. Using displayName or type for production should never be used. This is because during, for example, minification the displayName and type will change, so the logic you are expecting will not occur in the way you are expecting.

The following states:

The displayName string is used in debugging messages. Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component

A better solution would be to add some sort of flagProp to your component.
For example

decideWhatToDo = () => {

  const { flagPropName } = this.props;

  return flagPropName

    ? this.methodOne()

    : this.methodTwo();

 }

In the two methods you can then decide what you want to do if componentTwo exists or if it doesn't exist

Check in the array using indexOf:

collectionOfComponents.indexOf('ComponentTwo') !== -1 // found

Maybe you can use this way or simulary ??

    <Wrapper1>

      {collectionOfComponents.map((oneComponent, index) => (

        <Wrapper2

          ..props

        >

          {oneComponent.component instanceof ComponentTwo ? renderWasYouWant : otherRender }

        </Wrapper2>

      )

    </Wrapper1>