JSX dynamic component - Unknown prop

Question

I'm trying to render components after dynamically determining their name and I'm getting this

Unknown prop ent on <resultComponent> tag. Remove this prop from the element.

The offending code, within another component

  <ul>
    {this.state.results.map(entity => {
      var resultComponent = null;
      var key = null;

      if (entity instanceof ProjectModel) {
        resultComponent = ProjectResult;
        key = "p";
      } else {
        resultComponent = UserResult;
        key = "u";
      }

      return <resultComponent key={key + entity.id} ent={entity}/>;
    })}
  </ul>

Answer 1

You should rename your component, so it begins with a uppercase letter.

The JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).

So, <ResultComponent key={key + entity.id} ent={entity}/>; should work.