I know that during render I can get the child through refs and, for example, call a function on the child (which I can add to the child for this purpose) to determine the type of the child.

<Child ref={(child) => {this._childType = child.myFunctionToGetTheType();}} />

But in this example the function isn't actually called until the Child is mounted, so after the render of the Parent has finished executing.

I have a parent ponent that receives its children through props. Because of React limitations I need to treat a specific child in a special way BEFORE the render of the parent has finished executing (i.e. return something else from the parent's render function for that specific child).

Is it possible to determine the type of the child before returning from the parent's render function (i.e. without using refs)?

I know that during render I can get the child through refs and, for example, call a function on the child (which I can add to the child for this purpose) to determine the type of the child.

<Child ref={(child) => {this._childType = child.myFunctionToGetTheType();}} />

But in this example the function isn't actually called until the Child is mounted, so after the render of the Parent has finished executing.

I have a parent ponent that receives its children through props. Because of React limitations I need to treat a specific child in a special way BEFORE the render of the parent has finished executing (i.e. return something else from the parent's render function for that specific child).

Is it possible to determine the type of the child before returning from the parent's render function (i.e. without using refs)?

• javascript
• reactjs

• 2 I cannot stand still not asking "Why you want it?!" :) Looks like bad design – Artem Dudkin Commented Dec 16, 2016 at 16:14
• Even if it's bad design, question still can be asked :) I already stated why I need this. It's a workaround for the React limitation, which hopefully will be addressed in the next release. I essentially need to replace this github./yoonka/unigrid/blob/… which is used to determine how to render a child here github./yoonka/unigrid/blob/… with a better solution because the current one doesn't use the official React API. – Greg Commented Dec 17, 2016 at 18:21
• Duno why you think it is not a React way, but I think that getting child by ref in the middle of render is more not-react-way then getting type of created (but not rendered) child. – Artem Dudkin Commented Dec 19, 2016 at 8:48
• I don't know if it's React way, I only stated that's not the official Rect API because it gets stripped in production code after minification. And that's because names of React classes gets replaced with shorter names and elem.type.name is no longer valid. However, I have noticed that it doesn't strip static function so I might have a workaround in the end. – Greg Commented Dec 19, 2016 at 12:18
• 1 spicyj remends to pare the type to the object exactly - see github./facebook/react/issues/4915#issuement-162730765. I do not like this, I prefere displayName, but I do not know the way to save it at prod. – Artem Dudkin Commented Dec 19, 2016 at 12:28

2 Answers 2

I've had the same issue, where I was relying on child.type.name to determine the type of ponent. While this works fine for me, the issue is that older browsers somehow do not support that so I had to find another way. I was using Stateless Functional Components and did not want to switch away, so ended up exploiting props

const MySFC = () => {
  //...
  return (
    <div className="MySFC"></div>
  );
};

MySFC.propTypes = {
  type: PropTypes.string
};

MySFC.defaultProps = {
  type: "MySFC"
}

export default MySFC;

then instead of using child.type.name === 'MySFC' I used child.props.type === 'MySFC'

not ideal, but works

I have added a static function to the class that extends React.Element and it seems that I am able to access it through child.type.theStaticFunction. That probably still isn't using the React API correctly but at least it works after the code has been minified (child.type.name didn't work because the minifier was replacing class names with shorter versions).

export default class MyType extends React.Component {
  static isMyType() {
    return true;
  }
}

then when processing the children in render

static _isChildOfMyType(child) {
  const isMyType = child.type && child.type.isMyType && elem.type.isMyType();
  return !!isMyType;
}