diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index f11112811f517..ff58a4e67ae8e 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -361,7 +361,7 @@ namespace ts {
             // The presence of a particular fact means that the given test is true for some (and possibly all) values
             // of that kind of type.
             BaseStringStrictFacts = TypeofEQString | TypeofNENumber | TypeofNEBoolean | TypeofNESymbol | TypeofNEObject | TypeofNEFunction | TypeofNEHostObject | NEUndefined | NENull | NEUndefinedOrNull,
-            BaseStringFacts = BaseStringStrictFacts  | EQUndefined | EQNull | EQUndefinedOrNull | Falsy,
+            BaseStringFacts = BaseStringStrictFacts | EQUndefined | EQNull | EQUndefinedOrNull | Falsy,
             StringStrictFacts = BaseStringStrictFacts | Truthy | Falsy,
             StringFacts = BaseStringFacts | Truthy,
             EmptyStringStrictFacts = BaseStringStrictFacts | Falsy,
@@ -423,14 +423,20 @@ namespace ts {
 
         let _jsxNamespace: string;
         let _jsxFactoryEntity: EntityName;
+        let _jsxElementPropertiesName: string;
+        let _hasComputedJsxElementPropertiesName = false;
+        let _jsxElementChildrenPropertyName: string;
+        let _hasComputedJsxElementChildrenPropertyName = false;
 
         /** Things we lazy load from the JSX namespace */
         const jsxTypes = createMap<Type>();
+
         const JsxNames = {
             JSX: "JSX",
             IntrinsicElements: "IntrinsicElements",
             ElementClass: "ElementClass",
             ElementAttributesPropertyNameContainer: "ElementAttributesProperty",
+            ElementChildrenAttributeNameContainer: "ElementChildrenAttribute",
             Element: "Element",
             IntrinsicAttributes: "IntrinsicAttributes",
             IntrinsicClassAttributes: "IntrinsicClassAttributes"
@@ -468,7 +474,7 @@ namespace ts {
         return checker;
 
         function getJsxNamespace(): string {
-            if (_jsxNamespace === undefined) {
+            if (!_jsxNamespace) {
                 _jsxNamespace = "React";
                 if (compilerOptions.jsxFactory) {
                     _jsxFactoryEntity = parseIsolatedEntityName(compilerOptions.jsxFactory, languageVersion);
@@ -1645,7 +1651,7 @@ namespace ts {
                 }
             }
 
-             // May be an untyped module. If so, ignore resolutionDiagnostic.
+            // May be an untyped module. If so, ignore resolutionDiagnostic.
             if (!isRelative && resolvedModule && !extensionIsTypeScript(resolvedModule.extension)) {
                 if (isForAugmentation) {
                     const diag = Diagnostics.Invalid_module_name_in_augmentation_Module_0_resolves_to_an_untyped_module_at_1_which_cannot_be_augmented;
@@ -4000,7 +4006,7 @@ namespace ts {
                 type;
         }
 
-        function getTypeForDeclarationFromJSDocComment(declaration: Node ) {
+        function getTypeForDeclarationFromJSDocComment(declaration: Node) {
             const jsdocType = getJSDocType(declaration);
             if (jsdocType) {
                 return getTypeFromTypeNode(jsdocType);
@@ -5667,7 +5673,7 @@ namespace ts {
         function getConstraintOfType(type: TypeVariable | UnionOrIntersectionType): Type {
             return type.flags & TypeFlags.TypeParameter ? getConstraintOfTypeParameter(<TypeParameter>type) :
                 type.flags & TypeFlags.IndexedAccess ? getConstraintOfIndexedAccess(<IndexedAccessType>type) :
-                getBaseConstraintOfType(type);
+                    getBaseConstraintOfType(type);
         }
 
         function getConstraintOfTypeParameter(typeParameter: TypeParameter): Type {
@@ -5740,7 +5746,7 @@ namespace ts {
                     }
                     return t.flags & TypeFlags.Union && baseTypes.length === types.length ? getUnionType(baseTypes) :
                         t.flags & TypeFlags.Intersection && baseTypes.length ? getIntersectionType(baseTypes) :
-                        undefined;
+                            undefined;
                 }
                 if (t.flags & TypeFlags.Index) {
                     return stringType;
@@ -5791,11 +5797,11 @@ namespace ts {
             const t = type.flags & TypeFlags.TypeVariable ? getBaseConstraintOfType(type) || emptyObjectType : type;
             return t.flags & TypeFlags.Intersection ? getApparentTypeOfIntersectionType(<IntersectionType>t) :
                 t.flags & TypeFlags.StringLike ? globalStringType :
-                t.flags & TypeFlags.NumberLike ? globalNumberType :
-                t.flags & TypeFlags.BooleanLike ? globalBooleanType :
-                t.flags & TypeFlags.ESSymbol ? getGlobalESSymbolType(/*reportErrors*/ languageVersion >= ScriptTarget.ES2015) :
-                t.flags & TypeFlags.NonPrimitive ? emptyObjectType :
-                t;
+                    t.flags & TypeFlags.NumberLike ? globalNumberType :
+                        t.flags & TypeFlags.BooleanLike ? globalBooleanType :
+                            t.flags & TypeFlags.ESSymbol ? getGlobalESSymbolType(/*reportErrors*/ languageVersion >= ScriptTarget.ES2015) :
+                                t.flags & TypeFlags.NonPrimitive ? emptyObjectType :
+                                    t;
         }
 
         function createUnionOrIntersectionProperty(containingType: UnionOrIntersectionType, name: string): Symbol {
@@ -7239,8 +7245,8 @@ namespace ts {
         function getIndexType(type: Type): Type {
             return maybeTypeOfKind(type, TypeFlags.TypeVariable) ? getIndexTypeForGenericType(<TypeVariable | UnionOrIntersectionType>type) :
                 getObjectFlags(type) & ObjectFlags.Mapped ? getConstraintTypeFromMappedType(<MappedType>type) :
-                type.flags & TypeFlags.Any || getIndexInfoOfType(type, IndexKind.String) ? stringType :
-                getLiteralTypeFromPropertyNames(type);
+                    type.flags & TypeFlags.Any || getIndexInfoOfType(type, IndexKind.String) ? stringType :
+                        getLiteralTypeFromPropertyNames(type);
         }
 
         function getIndexTypeOrString(type: Type): Type {
@@ -7436,7 +7442,7 @@ namespace ts {
          * this function should be called in a left folding style, with left = previous result of getSpreadType
          * and right = the new element to be spread.
          */
-        function getSpreadType(left: Type, right: Type): Type  {
+        function getSpreadType(left: Type, right: Type): Type {
             if (left.flags & TypeFlags.Any || right.flags & TypeFlags.Any) {
                 return anyType;
             }
@@ -7736,7 +7742,7 @@ namespace ts {
         function createTypeMapper(sources: Type[], targets: Type[]): TypeMapper {
             const mapper: TypeMapper = sources.length === 1 ? makeUnaryTypeMapper(sources[0], targets ? targets[0] : anyType) :
                 sources.length === 2 ? makeBinaryTypeMapper(sources[0], targets ? targets[0] : anyType, sources[1], targets ? targets[1] : anyType) :
-                makeArrayTypeMapper(sources, targets);
+                    makeArrayTypeMapper(sources, targets);
             mapper.mappedTypes = sources;
             return mapper;
         }
@@ -8543,7 +8549,7 @@ namespace ts {
                     (globalNumberType === source && numberType === target) ||
                     (globalBooleanType === source && booleanType === target) ||
                     (getGlobalESSymbolType(/*reportErrors*/ false) === source && esSymbolType === target)) {
-                        reportError(Diagnostics._0_is_a_primitive_but_1_is_a_wrapper_object_Prefer_using_0_when_possible, targetType, sourceType);
+                    reportError(Diagnostics._0_is_a_primitive_but_1_is_a_wrapper_object_Prefer_using_0_when_possible, targetType, sourceType);
                 }
             }
 
@@ -8724,7 +8730,7 @@ namespace ts {
                                 // Use this property as the error node as this will be more helpful in
                                 // reasoning about what went wrong.
                                 Debug.assert(!!errorNode);
-                                if (isJsxAttributes(errorNode)) {
+                                if (isJsxAttributes(errorNode) || isJsxOpeningLikeElement(errorNode)) {
                                     // JsxAttributes has an object-literal flag and undergo same type-assignablity check as normal object-literal.
                                     // However, using an object-literal error message will be very confusing to the users so we give different a message.
                                     reportError(Diagnostics.Property_0_does_not_exist_on_type_1, symbolToString(prop), typeToString(target));
@@ -9667,25 +9673,25 @@ namespace ts {
         function isLiteralType(type: Type): boolean {
             return type.flags & TypeFlags.Boolean ? true :
                 type.flags & TypeFlags.Union ? type.flags & TypeFlags.Enum ? true : !forEach((<UnionType>type).types, t => !isUnitType(t)) :
-                isUnitType(type);
+                    isUnitType(type);
         }
 
         function getBaseTypeOfLiteralType(type: Type): Type {
             return type.flags & TypeFlags.StringLiteral ? stringType :
                 type.flags & TypeFlags.NumberLiteral ? numberType :
-                type.flags & TypeFlags.BooleanLiteral ? booleanType :
-                type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
-                type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getBaseTypeOfLiteralType)) :
-                type;
+                    type.flags & TypeFlags.BooleanLiteral ? booleanType :
+                        type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
+                            type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getBaseTypeOfLiteralType)) :
+                                type;
         }
 
         function getWidenedLiteralType(type: Type): Type {
             return type.flags & TypeFlags.StringLiteral && type.flags & TypeFlags.FreshLiteral ? stringType :
                 type.flags & TypeFlags.NumberLiteral && type.flags & TypeFlags.FreshLiteral ? numberType :
-                type.flags & TypeFlags.BooleanLiteral ? booleanType :
-                type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
-                type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getWidenedLiteralType)) :
-                type;
+                    type.flags & TypeFlags.BooleanLiteral ? booleanType :
+                        type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
+                            type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getWidenedLiteralType)) :
+                                type;
         }
 
         /**
@@ -9710,9 +9716,9 @@ namespace ts {
         function getFalsyFlags(type: Type): TypeFlags {
             return type.flags & TypeFlags.Union ? getFalsyFlagsOfTypes((<UnionType>type).types) :
                 type.flags & TypeFlags.StringLiteral ? (<LiteralType>type).text === "" ? TypeFlags.StringLiteral : 0 :
-                type.flags & TypeFlags.NumberLiteral ? (<LiteralType>type).text === "0" ? TypeFlags.NumberLiteral : 0 :
-                type.flags & TypeFlags.BooleanLiteral ? type === falseType ? TypeFlags.BooleanLiteral : 0 :
-                type.flags & TypeFlags.PossiblyFalsy;
+                    type.flags & TypeFlags.NumberLiteral ? (<LiteralType>type).text === "0" ? TypeFlags.NumberLiteral : 0 :
+                        type.flags & TypeFlags.BooleanLiteral ? type === falseType ? TypeFlags.BooleanLiteral : 0 :
+                            type.flags & TypeFlags.PossiblyFalsy;
         }
 
         function includeFalsyTypes(type: Type, flags: TypeFlags) {
@@ -10898,8 +10904,8 @@ namespace ts {
                 isTypeSubsetOf(numberType, typeWithPrimitives) && maybeTypeOfKind(typeWithLiterals, TypeFlags.NumberLiteral)) {
                 return mapType(typeWithPrimitives, t =>
                     t.flags & TypeFlags.String ? extractTypesOfKind(typeWithLiterals, TypeFlags.String | TypeFlags.StringLiteral) :
-                    t.flags & TypeFlags.Number ? extractTypesOfKind(typeWithLiterals, TypeFlags.Number | TypeFlags.NumberLiteral) :
-                    t);
+                        t.flags & TypeFlags.Number ? extractTypesOfKind(typeWithLiterals, TypeFlags.Number | TypeFlags.NumberLiteral) :
+                            t);
             }
             return typeWithPrimitives;
         }
@@ -11475,7 +11481,7 @@ namespace ts {
                 const discriminantType = getUnionType(clauseTypes);
                 const caseType =
                     discriminantType.flags & TypeFlags.Never ? neverType :
-                    replacePrimitivesWithLiterals(filterType(type, t => isTypeComparableTo(discriminantType, t)), discriminantType);
+                        replacePrimitivesWithLiterals(filterType(type, t => isTypeComparableTo(discriminantType, t)), discriminantType);
                 if (!hasDefaultClause) {
                     return caseType;
                 }
@@ -11555,8 +11561,8 @@ namespace ts {
                 // two types.
                 return isTypeSubtypeOf(candidate, type) ? candidate :
                     isTypeAssignableTo(type, candidate) ? type :
-                    isTypeAssignableTo(candidate, type) ? candidate :
-                    getIntersectionType([type, candidate]);
+                        isTypeAssignableTo(candidate, type) ? candidate :
+                            getIntersectionType([type, candidate]);
             }
 
             function narrowTypeByTypePredicate(type: Type, callExpression: CallExpression, assumeTrue: boolean): Type {
@@ -11833,7 +11839,7 @@ namespace ts {
                 isInAmbientContext(declaration);
             const initialType = assumeInitialized ? (isParameter ? removeOptionalityFromDeclaredType(type, getRootDeclaration(declaration) as VariableLikeDeclaration) : type) :
                 type === autoType || type === autoArrayType ? undefinedType :
-                includeFalsyTypes(type, TypeFlags.Undefined);
+                    includeFalsyTypes(type, TypeFlags.Undefined);
             const flowType = getFlowTypeOfReference(node, type, initialType, flowContainer, !assumeInitialized);
             // A variable is considered uninitialized when it is possible to analyze the entire control flow graph
             // from declaration to use, and when the variable's declared type doesn't include undefined but the
@@ -12340,7 +12346,7 @@ namespace ts {
                 func.kind === SyntaxKind.GetAccessor ||
                 func.kind === SyntaxKind.SetAccessor) && func.parent.kind === SyntaxKind.ObjectLiteralExpression ? <ObjectLiteralExpression>func.parent :
                 func.kind === SyntaxKind.FunctionExpression && func.parent.kind === SyntaxKind.PropertyAssignment ? <ObjectLiteralExpression>func.parent.parent :
-                undefined;
+                    undefined;
         }
 
         function getThisTypeArgument(type: Type): Type {
@@ -12671,6 +12677,36 @@ namespace ts {
             return node === conditional.whenTrue || node === conditional.whenFalse ? getContextualType(conditional) : undefined;
         }
 
+        function getContextualTypeForJsxExpression(node: JsxExpression): Type {
+            // JSX expression can appear in two position : JSX Element's children or JSX attribute
+            const jsxAttributes = isJsxAttributeLike(node.parent) ?
+                node.parent.parent :
+                node.parent.openingElement.attributes; // node.parent is JsxElement
+
+            // When we trying to resolve JsxOpeningLikeElement as a stateless function element, we will already give its attributes a contextual type
+            // which is a type of the parameter of the signature we are trying out.
+            // If there is no contextual type (e.g. we are trying to resolve stateful component), get attributes type from resolving element's tagName
+            const attributesType = getContextualType(jsxAttributes);
+
+            if (!attributesType || isTypeAny(attributesType)) {
+                return undefined;
+            }
+
+            if (isJsxAttribute(node.parent)) {
+                // JSX expression is in JSX attribute
+                return getTypeOfPropertyOfType(attributesType, (node.parent as JsxAttribute).name.text);
+            }
+            else if (node.parent.kind === SyntaxKind.JsxElement) {
+                // JSX expression is in children of JSX Element, we will look for an "children" atttribute (we get the name from JSX.ElementAttributesProperty)
+                const jsxChildrenPropertyName = getJsxElementChildrenPropertyname();
+                return jsxChildrenPropertyName && jsxChildrenPropertyName !== "" ? getTypeOfPropertyOfType(attributesType, jsxChildrenPropertyName) : anyType;
+            }
+            else {
+                // JSX expression is in JSX spread attribute
+                return attributesType;
+            }
+        }
+
         function getContextualTypeForJsxAttribute(attribute: JsxAttribute | JsxSpreadAttribute) {
             // When we trying to resolve JsxOpeningLikeElement as a stateless function element, we will already give its attributes a contextual type
             // which is a type of the parameter of the signature we are trying out.
@@ -12754,7 +12790,7 @@ namespace ts {
                 case SyntaxKind.ParenthesizedExpression:
                     return getContextualType(<ParenthesizedExpression>parent);
                 case SyntaxKind.JsxExpression:
-                    return getContextualType(<JsxExpression>parent);
+                    return getContextualTypeForJsxExpression(<JsxExpression>parent);
                 case SyntaxKind.JsxAttribute:
                 case SyntaxKind.JsxSpreadAttribute:
                     return getContextualTypeForJsxAttribute(<JsxAttribute | JsxSpreadAttribute>parent);
@@ -13214,21 +13250,6 @@ namespace ts {
                 checkExpression(node.closingElement.tagName);
             }
 
-            // Check children
-            for (const child of node.children) {
-                switch (child.kind) {
-                    case SyntaxKind.JsxExpression:
-                        checkJsxExpression(<JsxExpression>child);
-                        break;
-                    case SyntaxKind.JsxElement:
-                        checkJsxElement(<JsxElement>child);
-                        break;
-                    case SyntaxKind.JsxSelfClosingElement:
-                        checkJsxSelfClosingElement(<JsxSelfClosingElement>child);
-                        break;
-                }
-            }
-
             return getJsxGlobalElementType() || anyType;
         }
 
@@ -13321,6 +13342,42 @@ namespace ts {
                     }
                 });
             }
+
+            // Handle children attribute
+            const parent = openingLikeElement.parent.kind === SyntaxKind.JsxElement ? openingLikeElement.parent as JsxElement : undefined;
+            // We have to check that openingElement of the parent is the one we are visiting as this may not be true for selfClosingElement
+            if (parent && parent.openingElement === openingLikeElement && parent.children.length > 0) {
+                const childrenTypes: Type[] = [];
+                for (const child of (parent as JsxElement).children) {
+                    // In React, JSX text that contains only whitespaces will be ignored so we don't want to type-check that
+                    // because then type of children property will have constituent of string type.
+                    if (child.kind === SyntaxKind.JsxText) {
+                        if (!child.containsOnlyWhiteSpaces) {
+                            childrenTypes.push(stringType);
+                        }
+                    }
+                    else {
+                        childrenTypes.push(checkExpression(child, checkMode));
+                    }
+                }
+
+                // Error if there is a attribute named "children" and children element.
+                // This is because children element will overwrite the value from attributes
+                const jsxChildrenPropertyName = getJsxElementChildrenPropertyname();
+                if (jsxChildrenPropertyName && jsxChildrenPropertyName !== "") {
+                    if (attributesTable.has(jsxChildrenPropertyName)) {
+                        error(attributes, Diagnostics._0_are_specified_twice_The_attribute_named_0_will_be_overwritten, jsxChildrenPropertyName);
+                    }
+
+                    // If there are children in the body of JSX element, create dummy attribute "children" with anyType so that it will pass the attribute checking process
+                    const childrenPropSymbol = createSymbol(SymbolFlags.Property | SymbolFlags.Transient, jsxChildrenPropertyName);
+                    childrenPropSymbol.type = childrenTypes.length === 1 ?
+                        childrenTypes[0] :
+                        createArrayType(getUnionType(childrenTypes,  /*subtypeReduction*/ false));
+                    attributesTable.set(jsxChildrenPropertyName, childrenPropSymbol);
+                }
+            }
+
             return createJsxAttributesType(attributes.symbol, attributesTable);
 
             /**
@@ -13420,41 +13477,61 @@ namespace ts {
             return getUnionType(map(signatures, getReturnTypeOfSignature), /*subtypeReduction*/ true);
         }
 
-        /// e.g. "props" for React.d.ts,
-        /// or 'undefined' if ElementAttributesProperty doesn't exist (which means all
-        ///     non-intrinsic elements' attributes type is 'any'),
-        /// or '' if it has 0 properties (which means every
-        ///     non-intrinsic elements' attributes type is the element instance type)
-        function getJsxElementPropertiesName() {
+        /**
+         * Look into JSX namespace and then look for container with matching name as nameOfAttribPropContainer.
+         * Get a single property from that container if existed. Report an error if there are more than one property.
+         *
+         * @param nameOfAttribPropContainer a string of value JsxNames.ElementAttributesPropertyNameContainer or JsxNames.ElementChildrenAttributeNameContainer
+         *          if other string is given or the container doesn't exist, return undefined.
+         */
+        function getNameFromJsxElementAttributesContainer(nameOfAttribPropContainer: string): string {
             // JSX
             const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
-            // JSX.ElementAttributesProperty [symbol]
-            const attribsPropTypeSym = jsxNamespace && getSymbol(jsxNamespace.exports, JsxNames.ElementAttributesPropertyNameContainer, SymbolFlags.Type);
-            // JSX.ElementAttributesProperty [type]
-            const attribPropType = attribsPropTypeSym && getDeclaredTypeOfSymbol(attribsPropTypeSym);
-            // The properties of JSX.ElementAttributesProperty
-            const attribProperties = attribPropType && getPropertiesOfType(attribPropType);
-
-            if (attribProperties) {
+            // JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute [symbol]
+            const jsxElementAttribPropInterfaceSym = jsxNamespace && getSymbol(jsxNamespace.exports, nameOfAttribPropContainer, SymbolFlags.Type);
+            // JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute [type]
+            const jsxElementAttribPropInterfaceType = jsxElementAttribPropInterfaceSym && getDeclaredTypeOfSymbol(jsxElementAttribPropInterfaceSym);
+            // The properties of JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute
+            const propertiesOfJsxElementAttribPropInterface = jsxElementAttribPropInterfaceType && getPropertiesOfType(jsxElementAttribPropInterfaceType);
+            if (propertiesOfJsxElementAttribPropInterface) {
                 // Element Attributes has zero properties, so the element attributes type will be the class instance type
-                if (attribProperties.length === 0) {
+                if (propertiesOfJsxElementAttribPropInterface.length === 0) {
                     return "";
                 }
                 // Element Attributes has one property, so the element attributes type will be the type of the corresponding
                 // property of the class instance type
-                else if (attribProperties.length === 1) {
-                    return attribProperties[0].name;
+                else if (propertiesOfJsxElementAttribPropInterface.length === 1) {
+                    return propertiesOfJsxElementAttribPropInterface[0].name;
                 }
-                // More than one property on ElementAttributesProperty is an error
-                else {
-                    error(attribsPropTypeSym.declarations[0], Diagnostics.The_global_type_JSX_0_may_not_have_more_than_one_property, JsxNames.ElementAttributesPropertyNameContainer);
-                    return undefined;
+                else if (propertiesOfJsxElementAttribPropInterface.length > 1) {
+                    // More than one property on ElementAttributesProperty is an error
+                    error(jsxElementAttribPropInterfaceSym.declarations[0], Diagnostics.The_global_type_JSX_0_may_not_have_more_than_one_property, nameOfAttribPropContainer);
                 }
             }
-            else {
-                // No interface exists, so the element attributes type will be an implicit any
-                return undefined;
+            return undefined;
+        }
+
+        /// e.g. "props" for React.d.ts,
+        /// or 'undefined' if ElementAttributesProperty doesn't exist (which means all
+        ///     non-intrinsic elements' attributes type is 'any'),
+        /// or '' if it has 0 properties (which means every
+        ///     non-intrinsic elements' attributes type is the element instance type)
+        function getJsxElementPropertiesName() {
+            if (!_hasComputedJsxElementPropertiesName) {
+                _hasComputedJsxElementPropertiesName = true;
+                _jsxElementPropertiesName = getNameFromJsxElementAttributesContainer(JsxNames.ElementAttributesPropertyNameContainer);
+            }
+
+            return _jsxElementPropertiesName;
+        }
+
+        function getJsxElementChildrenPropertyname(): string {
+            if (!_hasComputedJsxElementChildrenPropertyName) {
+                _hasComputedJsxElementChildrenPropertyName = true;
+                _jsxElementChildrenPropertyName = getNameFromJsxElementAttributesContainer(JsxNames.ElementChildrenAttributeNameContainer);
             }
+
+            return _jsxElementChildrenPropertyName;
         }
 
         /**
diff --git a/src/compiler/diagnosticMessages.json b/src/compiler/diagnosticMessages.json
index eb3e476a6f2b9..9ff983a3a8882 100644
--- a/src/compiler/diagnosticMessages.json
+++ b/src/compiler/diagnosticMessages.json
@@ -2107,6 +2107,10 @@
         "category": "Error",
         "code": 2709
     },
+    "'{0}' are specified twice. The attribute named '{0}' will be overwritten.": {
+        "category": "Error",
+        "code": 2710
+    },
 
     "Import declaration '{0}' is using private name '{1}'.": {
         "category": "Error",
diff --git a/src/compiler/emitter.ts b/src/compiler/emitter.ts
index 69b5188878f86..669c9f5dd36ee 100644
--- a/src/compiler/emitter.ts
+++ b/src/compiler/emitter.ts
@@ -2457,7 +2457,7 @@ namespace ts {
             let indentation: number;
             for (const line of lines) {
                 for (let i = 0; i < line.length && (indentation === undefined || i < indentation); i++) {
-                    if (!isWhiteSpace(line.charCodeAt(i))) {
+                    if (!isWhiteSpaceLike(line.charCodeAt(i))) {
                         if (indentation === undefined || i < indentation) {
                             indentation = i;
                             break;
diff --git a/src/compiler/parser.ts b/src/compiler/parser.ts
index 08144e7929952..8c11ae791c176 100644
--- a/src/compiler/parser.ts
+++ b/src/compiler/parser.ts
@@ -3827,6 +3827,7 @@ namespace ts {
 
         function parseJsxText(): JsxText {
             const node = <JsxText>createNode(SyntaxKind.JsxText, scanner.getStartPos());
+            node.containsOnlyWhiteSpaces = currentToken === SyntaxKind.JsxTextAllWhiteSpaces;
             currentToken = scanner.scanJsxToken();
             return finishNode(node);
         }
@@ -3834,6 +3835,7 @@ namespace ts {
         function parseJsxChild(): JsxChild {
             switch (token()) {
                 case SyntaxKind.JsxText:
+                case SyntaxKind.JsxTextAllWhiteSpaces:
                     return parseJsxText();
                 case SyntaxKind.OpenBraceToken:
                     return parseJsxExpression(/*inExpressionContext*/ false);
@@ -3863,7 +3865,10 @@ namespace ts {
                 else if (token() === SyntaxKind.ConflictMarkerTrivia) {
                     break;
                 }
-                result.push(parseJsxChild());
+                const child = parseJsxChild();
+                if (child) {
+                    result.push(child);
+                }
             }
 
             result.end = scanner.getTokenPos();
diff --git a/src/compiler/scanner.ts b/src/compiler/scanner.ts
index 41c48700a9a04..0ae0f07717904 100644
--- a/src/compiler/scanner.ts
+++ b/src/compiler/scanner.ts
@@ -366,7 +366,7 @@ namespace ts {
         return computeLineAndCharacterOfPosition(getLineStarts(sourceFile), position);
     }
 
-    export function isWhiteSpace(ch: number): boolean {
+    export function isWhiteSpaceLike(ch: number): boolean {
         return isWhiteSpaceSingleLine(ch) || isLineBreak(ch);
     }
 
@@ -510,7 +510,7 @@ namespace ts {
                       break;
 
                   default:
-                      if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpace(ch))) {
+                      if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpaceLike(ch))) {
                           pos++;
                           continue;
                       }
@@ -691,7 +691,7 @@ namespace ts {
                     }
                     break scan;
                 default:
-                    if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpace(ch))) {
+                    if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpaceLike(ch))) {
                         if (hasPendingCommentRange && isLineBreak(ch)) {
                             pendingHasTrailingNewLine = true;
                         }
@@ -1723,8 +1723,12 @@ namespace ts {
                 return token = SyntaxKind.OpenBraceToken;
             }
 
+            // First non-whitespace character on this line.
+            let firstNonWhitespace = 0;
+            // These initial values are special because the first line is:
+            // firstNonWhitespace = 0 to indicate that we want leading whitspace,
+
             while (pos < end) {
-                pos++;
                 char = text.charCodeAt(pos);
                 if (char === CharacterCodes.openBrace) {
                     break;
@@ -1736,8 +1740,23 @@ namespace ts {
                     }
                     break;
                 }
+
+                // FirstNonWhitespace is 0, then we only see whitespaces so far. If we see a linebreak, we want to ignore that whitespaces.
+                // i.e (- : whitespace)
+                //      <div>----
+                //      </div> becomes <div></div>
+                //
+                //      <div>----</div> becomes <div>----</div>
+                if (isLineBreak(char) && firstNonWhitespace === 0) {
+                    firstNonWhitespace = -1;
+                }
+                else if (!isWhiteSpaceLike(char)) {
+                    firstNonWhitespace = pos;
+                }
+                pos++;
             }
-            return token = SyntaxKind.JsxText;
+
+            return firstNonWhitespace === -1 ? SyntaxKind.JsxTextAllWhiteSpaces : SyntaxKind.JsxText;
         }
 
         // Scans a JSX identifier; these differ from normal identifiers in that
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index 8874fd1a798ec..754350c37b2a1 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -10,7 +10,7 @@ namespace ts {
 
     /** ES6 Map interface. */
     export interface Map<T> {
-        get(key: string): T;
+        get(key: string): T | undefined;
         has(key: string): boolean;
         set(key: string, value: T): this;
         delete(key: string): boolean;
@@ -65,6 +65,7 @@ namespace ts {
         NumericLiteral,
         StringLiteral,
         JsxText,
+        JsxTextAllWhiteSpaces,
         RegularExpressionLiteral,
         NoSubstitutionTemplateLiteral,
         // Pseudo-literals
@@ -1572,6 +1573,7 @@ namespace ts {
 
     export interface JsxText extends Node {
         kind: SyntaxKind.JsxText;
+        containsOnlyWhiteSpaces: boolean;
         parent?: JsxElement;
     }
 
diff --git a/src/services/formatting/smartIndenter.ts b/src/services/formatting/smartIndenter.ts
index b5c901482a7bc..01feaf390818e 100644
--- a/src/services/formatting/smartIndenter.ts
+++ b/src/services/formatting/smartIndenter.ts
@@ -54,7 +54,7 @@ namespace ts.formatting {
                 let current = position;
                 while (current > 0) {
                     const char = sourceFile.text.charCodeAt(current);
-                    if (!isWhiteSpace(char)) {
+                    if (!isWhiteSpaceLike(char)) {
                         break;
                     }
                     current--;
diff --git a/src/services/textChanges.ts b/src/services/textChanges.ts
index d7056cfdca241..e63c46ea8cedd 100644
--- a/src/services/textChanges.ts
+++ b/src/services/textChanges.ts
@@ -608,7 +608,7 @@ namespace ts.textChanges {
             if (force || !isTrivia(s)) {
                 this.lastNonTriviaPosition = this.writer.getTextPos();
                 let i = 0;
-                while (isWhiteSpace(s.charCodeAt(s.length - i - 1))) {
+                while (isWhiteSpaceLike(s.charCodeAt(s.length - i - 1))) {
                     i++;
                 }
                 // trim trailing whitespaces
diff --git a/src/services/utilities.ts b/src/services/utilities.ts
index 815faac7417ec..1b0881a33ac10 100644
--- a/src/services/utilities.ts
+++ b/src/services/utilities.ts
@@ -1380,7 +1380,7 @@ namespace ts {
     }
 
     export function getFirstNonSpaceCharacterPosition(text: string, position: number) {
-        while (isWhiteSpace(text.charCodeAt(position))) {
+        while (isWhiteSpaceLike(text.charCodeAt(position))) {
             position += 1;
         }
         return position;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.js b/tests/baselines/reference/checkJsxChildrenProperty1.js
new file mode 100644
index 0000000000000..44c1ca8a72945
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty1.js
@@ -0,0 +1,39 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k = <Comp a={10} b="hi" children ="lol" />;
+let k1 =
+    <Comp a={10} b="hi">
+        hi hi hi!
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        <div>hi hi hi!</div>
+    </Comp>;
+
+//// [file.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// OK
+var k = <Comp a={10} b="hi" children="lol"/>;
+var k1 = <Comp a={10} b="hi">
+        hi hi hi!
+    </Comp>;
+var k2 = <Comp a={10} b="hi">
+        <div>hi hi hi!</div>
+    </Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.symbols b/tests/baselines/reference/checkJsxChildrenProperty1.symbols
new file mode 100644
index 0000000000000..8793d0edd496d
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty1.symbols
@@ -0,0 +1,67 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface Prop {
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    a: number,
+>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
+
+    b: string,
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+
+    children: string | JSX.Element
+>children : Symbol(Prop.children, Decl(file.tsx, 4, 14))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+}
+
+function Comp(p: Prop) {
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+>p : Symbol(p, Decl(file.tsx, 8, 14))
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    return <div>{p.b}</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>p : Symbol(p, Decl(file.tsx, 8, 14))
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+}
+
+// OK
+let k = <Comp a={10} b="hi" children ="lol" />;
+>k : Symbol(k, Decl(file.tsx, 13, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+>a : Symbol(a, Decl(file.tsx, 13, 13))
+>b : Symbol(b, Decl(file.tsx, 13, 20))
+>children : Symbol(children, Decl(file.tsx, 13, 27))
+
+let k1 =
+>k1 : Symbol(k1, Decl(file.tsx, 14, 3))
+
+    <Comp a={10} b="hi">
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+>a : Symbol(a, Decl(file.tsx, 15, 9))
+>b : Symbol(b, Decl(file.tsx, 15, 16))
+
+        hi hi hi!
+    </Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+
+let k2 =
+>k2 : Symbol(k2, Decl(file.tsx, 18, 3))
+
+    <Comp a={10} b="hi">
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+>a : Symbol(a, Decl(file.tsx, 19, 9))
+>b : Symbol(b, Decl(file.tsx, 19, 16))
+
+        <div>hi hi hi!</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+
+    </Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty1.types b/tests/baselines/reference/checkJsxChildrenProperty1.types
new file mode 100644
index 0000000000000..821f95d9ae71b
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty1.types
@@ -0,0 +1,75 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+interface Prop {
+>Prop : Prop
+
+    a: number,
+>a : number
+
+    b: string,
+>b : string
+
+    children: string | JSX.Element
+>children : string | JSX.Element
+>JSX : any
+>Element : JSX.Element
+}
+
+function Comp(p: Prop) {
+>Comp : (p: Prop) => JSX.Element
+>p : Prop
+>Prop : Prop
+
+    return <div>{p.b}</div>;
+><div>{p.b}</div> : JSX.Element
+>div : any
+>p.b : string
+>p : Prop
+>b : string
+>div : any
+}
+
+// OK
+let k = <Comp a={10} b="hi" children ="lol" />;
+>k : JSX.Element
+><Comp a={10} b="hi" children ="lol" /> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+>children : string
+
+let k1 =
+>k1 : JSX.Element
+
+    <Comp a={10} b="hi">
+><Comp a={10} b="hi">        hi hi hi!    </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+
+        hi hi hi!
+    </Comp>;
+>Comp : (p: Prop) => JSX.Element
+
+let k2 =
+>k2 : JSX.Element
+
+    <Comp a={10} b="hi">
+><Comp a={10} b="hi">        <div>hi hi hi!</div>    </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+
+        <div>hi hi hi!</div>
+><div>hi hi hi!</div> : JSX.Element
+>div : any
+>div : any
+
+    </Comp>;
+>Comp : (p: Prop) => JSX.Element
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty10.js b/tests/baselines/reference/checkJsxChildrenProperty10.js
new file mode 100644
index 0000000000000..f022b28f20c28
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty10.js
@@ -0,0 +1,38 @@
+//// [file.tsx]
+declare module JSX {
+	interface Element { }
+	interface ElementAttributesProperty { props: {} }
+	interface IntrinsicElements { 
+		div: any;
+		h2: any;
+		h1: any;
+	}
+}
+
+class Button {
+	props: {}
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+let k4 = <Button> <h2> Hello </h2> </Button>;
+
+//// [file.jsx]
+var Button = (function () {
+    function Button() {
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}());
+// OK
+var k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+var k2 = <div> <h2> Hello </h2> {function (user) { return <h2>{user.name}</h2>; }}</div>;
+var k3 = <div> {1} {"That is a number"} </div>;
+var k4 = <Button> <h2> Hello </h2> </Button>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty10.symbols b/tests/baselines/reference/checkJsxChildrenProperty10.symbols
new file mode 100644
index 0000000000000..bf054377fb16a
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty10.symbols
@@ -0,0 +1,73 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : Symbol(JSX, Decl(file.tsx, 0, 0))
+
+	interface Element { }
+>Element : Symbol(Element, Decl(file.tsx, 0, 20))
+
+	interface ElementAttributesProperty { props: {} }
+>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(file.tsx, 1, 22))
+>props : Symbol(ElementAttributesProperty.props, Decl(file.tsx, 2, 38))
+
+	interface IntrinsicElements { 
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(file.tsx, 2, 50))
+
+		div: any;
+>div : Symbol(IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+		h2: any;
+>h2 : Symbol(IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+
+		h1: any;
+>h1 : Symbol(IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+	}
+}
+
+class Button {
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+
+	props: {}
+>props : Symbol(Button.props, Decl(file.tsx, 10, 14))
+
+    render() {
+>render : Symbol(Button.render, Decl(file.tsx, 11, 10))
+
+        return (<div>My Button</div>)
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : Symbol(k1, Decl(file.tsx, 18, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : Symbol(k2, Decl(file.tsx, 19, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>user : Symbol(user, Decl(file.tsx, 19, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>user : Symbol(user, Decl(file.tsx, 19, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : Symbol(k3, Decl(file.tsx, 20, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k4 = <Button> <h2> Hello </h2> </Button>;
+>k4 : Symbol(k4, Decl(file.tsx, 21, 3))
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty10.types b/tests/baselines/reference/checkJsxChildrenProperty10.types
new file mode 100644
index 0000000000000..cee5995b8515e
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty10.types
@@ -0,0 +1,89 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : any
+
+	interface Element { }
+>Element : Element
+
+	interface ElementAttributesProperty { props: {} }
+>ElementAttributesProperty : ElementAttributesProperty
+>props : {}
+
+	interface IntrinsicElements { 
+>IntrinsicElements : IntrinsicElements
+
+		div: any;
+>div : any
+
+		h2: any;
+>h2 : any
+
+		h1: any;
+>h1 : any
+	}
+}
+
+class Button {
+>Button : Button
+
+	props: {}
+>props : {}
+
+    render() {
+>render : () => JSX.Element
+
+        return (<div>My Button</div>)
+>(<div>My Button</div>) : JSX.Element
+><div>My Button</div> : JSX.Element
+>div : any
+>div : any
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : JSX.Element
+><div> <h2> Hello </h2> <h1> world </h1></div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+><h1> world </h1> : JSX.Element
+>h1 : any
+>h1 : any
+>div : any
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : JSX.Element
+><div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>(user: any) => <h2>{user.name}</h2> : (user: any) => JSX.Element
+>user : any
+><h2>{user.name}</h2> : JSX.Element
+>h2 : any
+>user.name : any
+>user : any
+>name : any
+>h2 : any
+>div : any
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : JSX.Element
+><div> {1} {"That is a number"} </div> : JSX.Element
+>div : any
+>1 : 1
+>"That is a number" : "That is a number"
+>div : any
+
+let k4 = <Button> <h2> Hello </h2> </Button>;
+>k4 : JSX.Element
+><Button> <h2> Hello </h2> </Button> : JSX.Element
+>Button : typeof Button
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>Button : typeof Button
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty11.js b/tests/baselines/reference/checkJsxChildrenProperty11.js
new file mode 100644
index 0000000000000..f022b28f20c28
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty11.js
@@ -0,0 +1,38 @@
+//// [file.tsx]
+declare module JSX {
+	interface Element { }
+	interface ElementAttributesProperty { props: {} }
+	interface IntrinsicElements { 
+		div: any;
+		h2: any;
+		h1: any;
+	}
+}
+
+class Button {
+	props: {}
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+let k4 = <Button> <h2> Hello </h2> </Button>;
+
+//// [file.jsx]
+var Button = (function () {
+    function Button() {
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}());
+// OK
+var k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+var k2 = <div> <h2> Hello </h2> {function (user) { return <h2>{user.name}</h2>; }}</div>;
+var k3 = <div> {1} {"That is a number"} </div>;
+var k4 = <Button> <h2> Hello </h2> </Button>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty11.symbols b/tests/baselines/reference/checkJsxChildrenProperty11.symbols
new file mode 100644
index 0000000000000..bf054377fb16a
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty11.symbols
@@ -0,0 +1,73 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : Symbol(JSX, Decl(file.tsx, 0, 0))
+
+	interface Element { }
+>Element : Symbol(Element, Decl(file.tsx, 0, 20))
+
+	interface ElementAttributesProperty { props: {} }
+>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(file.tsx, 1, 22))
+>props : Symbol(ElementAttributesProperty.props, Decl(file.tsx, 2, 38))
+
+	interface IntrinsicElements { 
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(file.tsx, 2, 50))
+
+		div: any;
+>div : Symbol(IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+		h2: any;
+>h2 : Symbol(IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+
+		h1: any;
+>h1 : Symbol(IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+	}
+}
+
+class Button {
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+
+	props: {}
+>props : Symbol(Button.props, Decl(file.tsx, 10, 14))
+
+    render() {
+>render : Symbol(Button.render, Decl(file.tsx, 11, 10))
+
+        return (<div>My Button</div>)
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : Symbol(k1, Decl(file.tsx, 18, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : Symbol(k2, Decl(file.tsx, 19, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>user : Symbol(user, Decl(file.tsx, 19, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>user : Symbol(user, Decl(file.tsx, 19, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : Symbol(k3, Decl(file.tsx, 20, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
+
+let k4 = <Button> <h2> Hello </h2> </Button>;
+>k4 : Symbol(k4, Decl(file.tsx, 21, 3))
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
+>Button : Symbol(Button, Decl(file.tsx, 8, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty11.types b/tests/baselines/reference/checkJsxChildrenProperty11.types
new file mode 100644
index 0000000000000..cee5995b8515e
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty11.types
@@ -0,0 +1,89 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+declare module JSX {
+>JSX : any
+
+	interface Element { }
+>Element : Element
+
+	interface ElementAttributesProperty { props: {} }
+>ElementAttributesProperty : ElementAttributesProperty
+>props : {}
+
+	interface IntrinsicElements { 
+>IntrinsicElements : IntrinsicElements
+
+		div: any;
+>div : any
+
+		h2: any;
+>h2 : any
+
+		h1: any;
+>h1 : any
+	}
+}
+
+class Button {
+>Button : Button
+
+	props: {}
+>props : {}
+
+    render() {
+>render : () => JSX.Element
+
+        return (<div>My Button</div>)
+>(<div>My Button</div>) : JSX.Element
+><div>My Button</div> : JSX.Element
+>div : any
+>div : any
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : JSX.Element
+><div> <h2> Hello </h2> <h1> world </h1></div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+><h1> world </h1> : JSX.Element
+>h1 : any
+>h1 : any
+>div : any
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : JSX.Element
+><div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>(user: any) => <h2>{user.name}</h2> : (user: any) => JSX.Element
+>user : any
+><h2>{user.name}</h2> : JSX.Element
+>h2 : any
+>user.name : any
+>user : any
+>name : any
+>h2 : any
+>div : any
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : JSX.Element
+><div> {1} {"That is a number"} </div> : JSX.Element
+>div : any
+>1 : 1
+>"That is a number" : "That is a number"
+>div : any
+
+let k4 = <Button> <h2> Hello </h2> </Button>;
+>k4 : JSX.Element
+><Button> <h2> Hello </h2> </Button> : JSX.Element
+>Button : typeof Button
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>Button : typeof Button
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
new file mode 100644
index 0000000000000..6bb91bd638501
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
@@ -0,0 +1,120 @@
+tests/cases/conformance/jsx/file.tsx(14,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
+    Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
+tests/cases/conformance/jsx/file.tsx(17,11): error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
+tests/cases/conformance/jsx/file.tsx(25,11): error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
+tests/cases/conformance/jsx/file.tsx(31,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
+        Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
+          Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
+tests/cases/conformance/jsx/file.tsx(37,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(Element | 1000000)[]' is not assignable to type 'string | Element'.
+        Type '(Element | 1000000)[]' is not assignable to type 'Element'.
+          Property 'type' is missing in type '(Element | 1000000)[]'.
+tests/cases/conformance/jsx/file.tsx(43,11): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(string | Element)[]' is not assignable to type 'string | Element'.
+        Type '(string | Element)[]' is not assignable to type 'Element'.
+          Property 'type' is missing in type '(string | Element)[]'.
+tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type 'Element[]' is not assignable to type 'string | Element'.
+        Type 'Element[]' is not assignable to type 'Element'.
+          Property 'type' is missing in type 'Element[]'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (7 errors) ====
+    import React = require('react');
+    
+    interface Prop {
+        a: number,
+        b: string,
+        children: string | JSX.Element
+    }
+    
+    function Comp(p: Prop) {
+        return <div>{p.b}</div>;
+    }
+    
+    // Error: missing children
+    let k = <Comp a={10} b="hi" />;
+                  ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
+    
+    let k0 =
+        <Comp a={10} b="hi" children="Random" >
+              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
+            hi hi hi!
+        </Comp>;
+    
+    let o = {
+         children:"Random"
+    }
+    let k1 =
+        <Comp a={10} b="hi" {...o} >
+              ~~~~~~~~~~~~~~~~~~~~
+!!! error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
+            hi hi hi!
+        </Comp>;
+    
+    // Error: incorrect type
+    let k2 =
+        <Comp a={10} b="hi">
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
+!!! error TS2322:         Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
+!!! error TS2322:           Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
+            <div> My Div </div>
+            {(name: string) => <div> My name {name} </div>}
+        </Comp>;
+    
+    let k3 =
+        <Comp a={10} b="hi">
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(Element | 1000000)[]' is not assignable to type 'string | Element'.
+!!! error TS2322:         Type '(Element | 1000000)[]' is not assignable to type 'Element'.
+!!! error TS2322:           Property 'type' is missing in type '(Element | 1000000)[]'.
+            <div> My Div </div>
+            {1000000}
+        </Comp>;
+    
+    let k4 =
+        <Comp a={10} b="hi" >
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(string | Element)[]' is not assignable to type 'string | Element'.
+!!! error TS2322:         Type '(string | Element)[]' is not assignable to type 'Element'.
+!!! error TS2322:           Property 'type' is missing in type '(string | Element)[]'.
+            <div> My Div </div>
+            hi hi hi!
+        </Comp>;
+    
+    let k5 =
+        <Comp a={10} b="hi" >
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type 'Element[]' is not assignable to type 'string | Element'.
+!!! error TS2322:         Type 'Element[]' is not assignable to type 'Element'.
+!!! error TS2322:           Property 'type' is missing in type 'Element[]'.
+            <div> My Div </div>
+            <div> My Div </div>
+        </Comp>;
\ No newline at end of file
diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.js b/tests/baselines/reference/checkJsxChildrenProperty2.js
new file mode 100644
index 0000000000000..dd92bb5dba899
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty2.js
@@ -0,0 +1,89 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: missing children
+let k = <Comp a={10} b="hi" />;
+
+let k0 =
+    <Comp a={10} b="hi" children="Random" >
+        hi hi hi!
+    </Comp>;
+
+let o = {
+     children:"Random"
+}
+let k1 =
+    <Comp a={10} b="hi" {...o} >
+        hi hi hi!
+    </Comp>;
+
+// Error: incorrect type
+let k2 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {(name: string) => <div> My name {name} </div>}
+    </Comp>;
+
+let k3 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {1000000}
+    </Comp>;
+
+let k4 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        hi hi hi!
+    </Comp>;
+
+let k5 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        <div> My Div </div>
+    </Comp>;
+
+//// [file.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// Error: missing children
+var k = <Comp a={10} b="hi"/>;
+var k0 = <Comp a={10} b="hi" children="Random">
+        hi hi hi!
+    </Comp>;
+var o = {
+    children: "Random"
+};
+var k1 = <Comp a={10} b="hi" {...o}>
+        hi hi hi!
+    </Comp>;
+// Error: incorrect type
+var k2 = <Comp a={10} b="hi">
+        <div> My Div </div>
+        {function (name) { return <div> My name {name} </div>; }}
+    </Comp>;
+var k3 = <Comp a={10} b="hi">
+        <div> My Div </div>
+        {1000000}
+    </Comp>;
+var k4 = <Comp a={10} b="hi">
+        <div> My Div </div>
+        hi hi hi!
+    </Comp>;
+var k5 = <Comp a={10} b="hi">
+        <div> My Div </div>
+        <div> My Div </div>
+    </Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.js b/tests/baselines/reference/checkJsxChildrenProperty3.js
new file mode 100644
index 0000000000000..49247925523d0
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty3.js
@@ -0,0 +1,79 @@
+//// [file.tsx]
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Ok
+function UserName0() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var FetchUser = (function (_super) {
+    __extends(FetchUser, _super);
+    function FetchUser() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FetchUser.prototype.render = function () {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    };
+    return FetchUser;
+}(React.Component));
+// Ok
+function UserName0() {
+    return (<FetchUser>
+            {function (user) { return (<h1>{user.Name}</h1>); }}
+        </FetchUser>);
+}
+function UserName1() {
+    return (<FetchUser>
+
+            {function (user) { return (<h1>{user.Name}</h1>); }}
+        </FetchUser>);
+}
diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.symbols b/tests/baselines/reference/checkJsxChildrenProperty3.symbols
new file mode 100644
index 0000000000000..49d146f07dac4
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty3.symbols
@@ -0,0 +1,99 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface IUser {
+>IUser : Symbol(IUser, Decl(file.tsx, 0, 32))
+
+    Name: string;
+>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+}
+
+interface IFetchUserProps {
+>IFetchUserProps : Symbol(IFetchUserProps, Decl(file.tsx, 4, 1))
+
+    children: (user: IUser) => JSX.Element;
+>children : Symbol(IFetchUserProps.children, Decl(file.tsx, 6, 27))
+>user : Symbol(user, Decl(file.tsx, 7, 15))
+>IUser : Symbol(IUser, Decl(file.tsx, 0, 32))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>IFetchUserProps : Symbol(IFetchUserProps, Decl(file.tsx, 4, 1))
+
+    render() {
+>render : Symbol(FetchUser.render, Decl(file.tsx, 10, 63))
+
+        return this.state
+>this.state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
+>this : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+>state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
+
+            ? this.props.children(this.state.result)
+>this.props.children : Symbol(children, Decl(file.tsx, 6, 27), Decl(react.d.ts, 173, 20))
+>this.props : Symbol(React.Component.props, Decl(react.d.ts, 166, 37))
+>this : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+>props : Symbol(React.Component.props, Decl(react.d.ts, 166, 37))
+>children : Symbol(children, Decl(file.tsx, 6, 27), Decl(react.d.ts, 173, 20))
+>this.state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
+>this : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+>state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
+
+            : null;
+    }
+}
+
+// Ok
+function UserName0() {
+>UserName0 : Symbol(UserName0, Decl(file.tsx, 16, 1))
+
+    return (
+        <FetchUser>
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+
+            { user => (
+>user : Symbol(user, Decl(file.tsx, 22, 13))
+
+                <h1>{ user.Name }</h1>
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+>user : Symbol(user, Decl(file.tsx, 22, 13))
+>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+
+            ) }
+        </FetchUser>
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+
+    );
+}
+
+function UserName1() {
+>UserName1 : Symbol(UserName1, Decl(file.tsx, 27, 1))
+
+    return (
+        <FetchUser>
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+
+            { user => (
+>user : Symbol(user, Decl(file.tsx, 33, 13))
+
+                <h1>{ user.Name }</h1>
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+>user : Symbol(user, Decl(file.tsx, 33, 13))
+>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+
+            ) }
+        </FetchUser>
+>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
+
+    );
+}
diff --git a/tests/baselines/reference/checkJsxChildrenProperty3.types b/tests/baselines/reference/checkJsxChildrenProperty3.types
new file mode 100644
index 0000000000000..7fbb91bee0055
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty3.types
@@ -0,0 +1,116 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+interface IUser {
+>IUser : IUser
+
+    Name: string;
+>Name : string
+}
+
+interface IFetchUserProps {
+>IFetchUserProps : IFetchUserProps
+
+    children: (user: IUser) => JSX.Element;
+>children : (user: IUser) => JSX.Element
+>user : IUser
+>IUser : IUser
+>JSX : any
+>Element : JSX.Element
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+>FetchUser : FetchUser
+>React.Component : React.Component<IFetchUserProps, any>
+>React : typeof React
+>Component : typeof React.Component
+>IFetchUserProps : IFetchUserProps
+
+    render() {
+>render : () => JSX.Element
+
+        return this.state
+>this.state            ? this.props.children(this.state.result)            : null : JSX.Element
+>this.state : any
+>this : this
+>state : any
+
+            ? this.props.children(this.state.result)
+>this.props.children(this.state.result) : JSX.Element
+>this.props.children : ((user: IUser) => JSX.Element) | (((user: IUser) => JSX.Element) & string) | (((user: IUser) => JSX.Element) & number) | (((user: IUser) => JSX.Element) & true) | (((user: IUser) => JSX.Element) & false) | (((user: IUser) => JSX.Element) & React.ReactElement<any>) | (((user: IUser) => JSX.Element) & (string | number | boolean | any[] | React.ReactElement<any>)[])
+>this.props : IFetchUserProps & { children?: React.ReactNode; }
+>this : this
+>props : IFetchUserProps & { children?: React.ReactNode; }
+>children : ((user: IUser) => JSX.Element) | (((user: IUser) => JSX.Element) & string) | (((user: IUser) => JSX.Element) & number) | (((user: IUser) => JSX.Element) & true) | (((user: IUser) => JSX.Element) & false) | (((user: IUser) => JSX.Element) & React.ReactElement<any>) | (((user: IUser) => JSX.Element) & (string | number | boolean | any[] | React.ReactElement<any>)[])
+>this.state.result : any
+>this.state : any
+>this : this
+>state : any
+>result : any
+
+            : null;
+>null : null
+    }
+}
+
+// Ok
+function UserName0() {
+>UserName0 : () => JSX.Element
+
+    return (
+>(        <FetchUser>            { user => (                <h1>{ user.Name }</h1>            ) }        </FetchUser>    ) : JSX.Element
+
+        <FetchUser>
+><FetchUser>            { user => (                <h1>{ user.Name }</h1>            ) }        </FetchUser> : JSX.Element
+>FetchUser : typeof FetchUser
+
+            { user => (
+>user => (                <h1>{ user.Name }</h1>            ) : (user: IUser) => JSX.Element
+>user : IUser
+>(                <h1>{ user.Name }</h1>            ) : JSX.Element
+
+                <h1>{ user.Name }</h1>
+><h1>{ user.Name }</h1> : JSX.Element
+>h1 : any
+>user.Name : string
+>user : IUser
+>Name : string
+>h1 : any
+
+            ) }
+        </FetchUser>
+>FetchUser : typeof FetchUser
+
+    );
+}
+
+function UserName1() {
+>UserName1 : () => JSX.Element
+
+    return (
+>(        <FetchUser>            { user => (                <h1>{ user.Name }</h1>            ) }        </FetchUser>    ) : JSX.Element
+
+        <FetchUser>
+><FetchUser>            { user => (                <h1>{ user.Name }</h1>            ) }        </FetchUser> : JSX.Element
+>FetchUser : typeof FetchUser
+
+            { user => (
+>user => (                <h1>{ user.Name }</h1>            ) : (user: IUser) => JSX.Element
+>user : IUser
+>(                <h1>{ user.Name }</h1>            ) : JSX.Element
+
+                <h1>{ user.Name }</h1>
+><h1>{ user.Name }</h1> : JSX.Element
+>h1 : any
+>user.Name : string
+>user : IUser
+>Name : string
+>h1 : any
+
+            ) }
+        </FetchUser>
+>FetchUser : typeof FetchUser
+
+    );
+}
diff --git a/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt
new file mode 100644
index 0000000000000..d12c557102c33
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt
@@ -0,0 +1,61 @@
+tests/cases/conformance/jsx/file.tsx(24,28): error TS2339: Property 'NAme' does not exist on type 'IUser'.
+tests/cases/conformance/jsx/file.tsx(32,9): error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
+  Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
+    Types of property 'children' are incompatible.
+      Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
+        Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (2 errors) ====
+    import React = require('react');
+    
+    interface IUser {
+        Name: string;
+    }
+    
+    interface IFetchUserProps {
+        children: (user: IUser) => JSX.Element;
+    }
+    
+    class FetchUser extends React.Component<IFetchUserProps, any> {
+        render() {
+            return this.state
+                ? this.props.children(this.state.result)
+                : null;
+        }
+    }
+    
+    // Error
+    function UserName() {
+        return (
+            <FetchUser>
+                { user => (
+                    <h1>{ user.NAme }</h1>
+                               ~~~~
+!!! error TS2339: Property 'NAme' does not exist on type 'IUser'.
+                ) }
+            </FetchUser>
+        );
+    }
+    
+    function UserName1() {
+        return (
+            <FetchUser>
+            ~~~~~~~~~~~
+!!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
+!!! error TS2322:   Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
+!!! error TS2322:         Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
+    
+    
+                
+                { user => (
+                    <h1>{ user.Name }</h1>
+                ) }
+                { user => (
+                    <h1>{ user.Name }</h1>
+                ) }
+            </FetchUser>
+        );
+    }
\ No newline at end of file
diff --git a/tests/baselines/reference/checkJsxChildrenProperty4.js b/tests/baselines/reference/checkJsxChildrenProperty4.js
new file mode 100644
index 0000000000000..d163ffb0f41b5
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty4.js
@@ -0,0 +1,87 @@
+//// [file.tsx]
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Error
+function UserName() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.NAme }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+
+            
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var FetchUser = (function (_super) {
+    __extends(FetchUser, _super);
+    function FetchUser() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FetchUser.prototype.render = function () {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    };
+    return FetchUser;
+}(React.Component));
+// Error
+function UserName() {
+    return (<FetchUser>
+            {function (user) { return (<h1>{user.NAme}</h1>); }}
+        </FetchUser>);
+}
+function UserName1() {
+    return (<FetchUser>
+
+
+            
+            {function (user) { return (<h1>{user.Name}</h1>); }}
+            {function (user) { return (<h1>{user.Name}</h1>); }}
+        </FetchUser>);
+}
diff --git a/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt
new file mode 100644
index 0000000000000..1890bc732d1af
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt
@@ -0,0 +1,62 @@
+tests/cases/conformance/jsx/file.tsx(20,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
+    Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
+tests/cases/conformance/jsx/file.tsx(24,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type 'Element' is not assignable to type 'Button'.
+        Property 'render' is missing in type 'Element'.
+tests/cases/conformance/jsx/file.tsx(28,11): error TS2322: Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type 'typeof Button' is not assignable to type 'Button'.
+        Property 'render' is missing in type 'typeof Button'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (3 errors) ====
+    import React = require('react');
+    
+    interface Prop {
+        a: number,
+        b: string,
+        children: Button;
+    }
+    
+    class Button extends React.Component<any, any> {
+        render() {
+            return (<div>My Button</div>)
+        }
+    }
+    
+    function Comp(p: Prop) {
+        return <div>{p.b}</div>;
+    }
+    
+    // Error: no children specified
+    let k = <Comp a={10} b="hi" />;
+                  ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
+    
+    // Error: JSX.element is not the same as JSX.ElementClass
+    let k1 =
+        <Comp a={10} b="hi">
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type 'Element' is not assignable to type 'Button'.
+!!! error TS2322:         Property 'render' is missing in type 'Element'.
+            <Button />
+        </Comp>;
+    let k2 =
+        <Comp a={10} b="hi">
+              ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type 'typeof Button' is not assignable to type 'Button'.
+!!! error TS2322:         Property 'render' is missing in type 'typeof Button'.
+            {Button}
+        </Comp>;
\ No newline at end of file
diff --git a/tests/baselines/reference/checkJsxChildrenProperty5.js b/tests/baselines/reference/checkJsxChildrenProperty5.js
new file mode 100644
index 0000000000000..a08dae2f25214
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty5.js
@@ -0,0 +1,68 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: Button;
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: no children specified
+let k = <Comp a={10} b="hi" />;
+
+// Error: JSX.element is not the same as JSX.ElementClass
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        {Button}
+    </Comp>;
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var Button = (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}(React.Component));
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// Error: no children specified
+var k = <Comp a={10} b="hi"/>;
+// Error: JSX.element is not the same as JSX.ElementClass
+var k1 = <Comp a={10} b="hi">
+        <Button />
+    </Comp>;
+var k2 = <Comp a={10} b="hi">
+        {Button}
+    </Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty6.js b/tests/baselines/reference/checkJsxChildrenProperty6.js
new file mode 100644
index 0000000000000..e433bc520dbe3
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty6.js
@@ -0,0 +1,91 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Ok
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k2 =
+    <Comp a={10} b="hi">
+     
+    
+    
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k3 = <Comp a={10} b="hi"><Button />  
+<AnotherButton />
+</Comp>;
+
+let k4 = <Comp a={10} b="hi"><Button /></Comp>;
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var Button = (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}(React.Component));
+function AnotherButton(p) {
+    return <h1>Just Another Button</h1>;
+}
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// Ok
+var k1 = <Comp a={10} b="hi">
+        <Button />
+        <AnotherButton />
+    </Comp>;
+var k2 = <Comp a={10} b="hi">
+     
+    
+    
+        <Button />
+        <AnotherButton />
+    </Comp>;
+var k3 = <Comp a={10} b="hi"><Button />  
+<AnotherButton />
+</Comp>;
+var k4 = <Comp a={10} b="hi"><Button /></Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty6.symbols b/tests/baselines/reference/checkJsxChildrenProperty6.symbols
new file mode 100644
index 0000000000000..e69b24a89ab22
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty6.symbols
@@ -0,0 +1,116 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface Prop {
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    a: number,
+>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
+
+    b: string,
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+
+    children: JSX.Element | JSX.Element[];
+>children : Symbol(Prop.children, Decl(file.tsx, 4, 14))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+}
+
+class Button extends React.Component<any, any> {
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+
+    render() {
+>render : Symbol(Button.render, Decl(file.tsx, 8, 48))
+
+        return (<div>My Button</div>)
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+    }
+}
+
+function AnotherButton(p: any) {
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>p : Symbol(p, Decl(file.tsx, 14, 23))
+
+    return <h1>Just Another Button</h1>;
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+}
+
+function Comp(p: Prop) {
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>p : Symbol(p, Decl(file.tsx, 18, 14))
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    return <div>{p.b}</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>p : Symbol(p, Decl(file.tsx, 18, 14))
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+}
+
+// Ok
+let k1 =
+>k1 : Symbol(k1, Decl(file.tsx, 23, 3))
+
+    <Comp a={10} b="hi">
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 24, 9))
+>b : Symbol(b, Decl(file.tsx, 24, 16))
+
+        <Button />
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+        <AnotherButton />
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+
+    </Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k2 =
+>k2 : Symbol(k2, Decl(file.tsx, 29, 3))
+
+    <Comp a={10} b="hi">
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 30, 9))
+>b : Symbol(b, Decl(file.tsx, 30, 16))
+     
+    
+    
+        <Button />
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+        <AnotherButton />
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+
+    </Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k3 = <Comp a={10} b="hi"><Button />  
+>k3 : Symbol(k3, Decl(file.tsx, 38, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 38, 14))
+>b : Symbol(b, Decl(file.tsx, 38, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+<AnotherButton />
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+
+</Comp>;
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k4 = <Comp a={10} b="hi"><Button /></Comp>;
+>k4 : Symbol(k4, Decl(file.tsx, 42, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 42, 14))
+>b : Symbol(b, Decl(file.tsx, 42, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty6.types b/tests/baselines/reference/checkJsxChildrenProperty6.types
new file mode 100644
index 0000000000000..f9af32072d279
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty6.types
@@ -0,0 +1,135 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+interface Prop {
+>Prop : Prop
+
+    a: number,
+>a : number
+
+    b: string,
+>b : string
+
+    children: JSX.Element | JSX.Element[];
+>children : JSX.Element | JSX.Element[]
+>JSX : any
+>Element : JSX.Element
+>JSX : any
+>Element : JSX.Element
+}
+
+class Button extends React.Component<any, any> {
+>Button : Button
+>React.Component : React.Component<any, any>
+>React : typeof React
+>Component : typeof React.Component
+
+    render() {
+>render : () => JSX.Element
+
+        return (<div>My Button</div>)
+>(<div>My Button</div>) : JSX.Element
+><div>My Button</div> : JSX.Element
+>div : any
+>div : any
+    }
+}
+
+function AnotherButton(p: any) {
+>AnotherButton : (p: any) => JSX.Element
+>p : any
+
+    return <h1>Just Another Button</h1>;
+><h1>Just Another Button</h1> : JSX.Element
+>h1 : any
+>h1 : any
+}
+
+function Comp(p: Prop) {
+>Comp : (p: Prop) => JSX.Element
+>p : Prop
+>Prop : Prop
+
+    return <div>{p.b}</div>;
+><div>{p.b}</div> : JSX.Element
+>div : any
+>p.b : string
+>p : Prop
+>b : string
+>div : any
+}
+
+// Ok
+let k1 =
+>k1 : JSX.Element
+
+    <Comp a={10} b="hi">
+><Comp a={10} b="hi">        <Button />        <AnotherButton />    </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+
+        <Button />
+><Button /> : JSX.Element
+>Button : typeof Button
+
+        <AnotherButton />
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+
+    </Comp>;
+>Comp : (p: Prop) => JSX.Element
+
+let k2 =
+>k2 : JSX.Element
+
+    <Comp a={10} b="hi">
+><Comp a={10} b="hi">                     <Button />        <AnotherButton />    </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+     
+    
+    
+        <Button />
+><Button /> : JSX.Element
+>Button : typeof Button
+
+        <AnotherButton />
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+
+    </Comp>;
+>Comp : (p: Prop) => JSX.Element
+
+let k3 = <Comp a={10} b="hi"><Button />  
+>k3 : JSX.Element
+><Comp a={10} b="hi"><Button />  <AnotherButton /></Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+
+<AnotherButton />
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+
+</Comp>;
+>Comp : (p: Prop) => JSX.Element
+
+let k4 = <Comp a={10} b="hi"><Button /></Comp>;
+>k4 : JSX.Element
+><Comp a={10} b="hi"><Button /></Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+>Comp : (p: Prop) => JSX.Element
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty7.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty7.errors.txt
new file mode 100644
index 0000000000000..ea31d008b2f54
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty7.errors.txt
@@ -0,0 +1,68 @@
+tests/cases/conformance/jsx/file.tsx(24,16): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+        Type '(string | Element)[]' is not assignable to type 'Element[]'.
+          Type 'string | Element' is not assignable to type 'Element'.
+            Type 'string' is not assignable to type 'Element'.
+tests/cases/conformance/jsx/file.tsx(25,16): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+        Type '(string | Element)[]' is not assignable to type 'Element[]'.
+tests/cases/conformance/jsx/file.tsx(27,16): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+  Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+    Types of property 'children' are incompatible.
+      Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+        Type '(string | Element)[]' is not assignable to type 'Element[]'.
+
+
+==== tests/cases/conformance/jsx/file.tsx (3 errors) ====
+    import React = require('react');
+    
+    interface Prop {
+        a: number,
+        b: string,
+        children: JSX.Element | JSX.Element[];
+    }
+    
+    class Button extends React.Component<any, any> {
+        render() {
+            return (<div>My Button</div>)
+        }
+    }
+    
+    function AnotherButton(p: any) {
+        return <h1>Just Another Button</h1>;
+    }
+    
+    function Comp(p: Prop) {
+        return <div>{p.b}</div>;
+    }
+    
+    // Error: whitespaces matters
+    let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+                   ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+!!! error TS2322:         Type '(string | Element)[]' is not assignable to type 'Element[]'.
+!!! error TS2322:           Type 'string | Element' is not assignable to type 'Element'.
+!!! error TS2322:             Type 'string' is not assignable to type 'Element'.
+    let k2 = <Comp a={10} b="hi"><Button />
+                   ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+!!! error TS2322:         Type '(string | Element)[]' is not assignable to type 'Element[]'.
+        <AnotherButton />  </Comp>;
+    let k3 = <Comp a={10} b="hi">    <Button />
+                   ~~~~~~~~~~~~~
+!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+!!! error TS2322:   Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
+!!! error TS2322:     Types of property 'children' are incompatible.
+!!! error TS2322:       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
+!!! error TS2322:         Type '(string | Element)[]' is not assignable to type 'Element[]'.
+        <AnotherButton /></Comp>;
\ No newline at end of file
diff --git a/tests/baselines/reference/checkJsxChildrenProperty7.js b/tests/baselines/reference/checkJsxChildrenProperty7.js
new file mode 100644
index 0000000000000..6a82233f0bc09
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty7.js
@@ -0,0 +1,66 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: whitespaces matters
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var Button = (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}(React.Component));
+function AnotherButton(p) {
+    return <h1>Just Another Button</h1>;
+}
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// Error: whitespaces matters
+var k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+var k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+var k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty8.js b/tests/baselines/reference/checkJsxChildrenProperty8.js
new file mode 100644
index 0000000000000..a2cd6a43fa500
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty8.js
@@ -0,0 +1,68 @@
+//// [file.tsx]
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element | (string | JSX.Element)[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
+
+//// [file.jsx]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+var React = require("react");
+var Button = (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Button.prototype.render = function () {
+        return (<div>My Button</div>);
+    };
+    return Button;
+}(React.Component));
+function AnotherButton(p) {
+    return <h1>Just Another Button</h1>;
+}
+function Comp(p) {
+    return <div>{p.b}</div>;
+}
+// OK
+var k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+var k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+var k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
+var k4 = <Comp a={10} b="hi"><Button />  </Comp>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty8.symbols b/tests/baselines/reference/checkJsxChildrenProperty8.symbols
new file mode 100644
index 0000000000000..b6f5f97adac23
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty8.symbols
@@ -0,0 +1,98 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+interface Prop {
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    a: number,
+>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
+
+    b: string,
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+
+    children: string | JSX.Element | (string | JSX.Element)[];
+>children : Symbol(Prop.children, Decl(file.tsx, 4, 14))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+}
+
+class Button extends React.Component<any, any> {
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
+
+    render() {
+>render : Symbol(Button.render, Decl(file.tsx, 8, 48))
+
+        return (<div>My Button</div>)
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+    }
+}
+
+function AnotherButton(p: any) {
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>p : Symbol(p, Decl(file.tsx, 14, 23))
+
+    return <h1>Just Another Button</h1>;
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+}
+
+function Comp(p: Prop) {
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>p : Symbol(p, Decl(file.tsx, 18, 14))
+>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
+
+    return <div>{p.b}</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>p : Symbol(p, Decl(file.tsx, 18, 14))
+>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+}
+
+// OK
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+>k1 : Symbol(k1, Decl(file.tsx, 23, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 23, 14))
+>b : Symbol(b, Decl(file.tsx, 23, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k2 = <Comp a={10} b="hi"><Button />
+>k2 : Symbol(k2, Decl(file.tsx, 24, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 24, 14))
+>b : Symbol(b, Decl(file.tsx, 24, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+    <AnotherButton />  </Comp>;
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k3 = <Comp a={10} b="hi">    <Button />
+>k3 : Symbol(k3, Decl(file.tsx, 26, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 26, 14))
+>b : Symbol(b, Decl(file.tsx, 26, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+
+    <AnotherButton /></Comp>;
+>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
+>k4 : Symbol(k4, Decl(file.tsx, 28, 3))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+>a : Symbol(a, Decl(file.tsx, 28, 14))
+>b : Symbol(b, Decl(file.tsx, 28, 21))
+>Button : Symbol(Button, Decl(file.tsx, 6, 1))
+>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty8.types b/tests/baselines/reference/checkJsxChildrenProperty8.types
new file mode 100644
index 0000000000000..39d94bae72060
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty8.types
@@ -0,0 +1,117 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+interface Prop {
+>Prop : Prop
+
+    a: number,
+>a : number
+
+    b: string,
+>b : string
+
+    children: string | JSX.Element | (string | JSX.Element)[];
+>children : string | JSX.Element | (string | JSX.Element)[]
+>JSX : any
+>Element : JSX.Element
+>JSX : any
+>Element : JSX.Element
+}
+
+class Button extends React.Component<any, any> {
+>Button : Button
+>React.Component : React.Component<any, any>
+>React : typeof React
+>Component : typeof React.Component
+
+    render() {
+>render : () => JSX.Element
+
+        return (<div>My Button</div>)
+>(<div>My Button</div>) : JSX.Element
+><div>My Button</div> : JSX.Element
+>div : any
+>div : any
+    }
+}
+
+function AnotherButton(p: any) {
+>AnotherButton : (p: any) => JSX.Element
+>p : any
+
+    return <h1>Just Another Button</h1>;
+><h1>Just Another Button</h1> : JSX.Element
+>h1 : any
+>h1 : any
+}
+
+function Comp(p: Prop) {
+>Comp : (p: Prop) => JSX.Element
+>p : Prop
+>Prop : Prop
+
+    return <div>{p.b}</div>;
+><div>{p.b}</div> : JSX.Element
+>div : any
+>p.b : string
+>p : Prop
+>b : string
+>div : any
+}
+
+// OK
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+>k1 : JSX.Element
+><Comp a={10} b="hi"><Button />  <AnotherButton /></Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+>Comp : (p: Prop) => JSX.Element
+
+let k2 = <Comp a={10} b="hi"><Button />
+>k2 : JSX.Element
+><Comp a={10} b="hi"><Button />    <AnotherButton />  </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+
+    <AnotherButton />  </Comp>;
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+>Comp : (p: Prop) => JSX.Element
+
+let k3 = <Comp a={10} b="hi">    <Button />
+>k3 : JSX.Element
+><Comp a={10} b="hi">    <Button />    <AnotherButton /></Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+
+    <AnotherButton /></Comp>;
+><AnotherButton /> : JSX.Element
+>AnotherButton : (p: any) => JSX.Element
+>Comp : (p: Prop) => JSX.Element
+
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
+>k4 : JSX.Element
+><Comp a={10} b="hi"><Button />  </Comp> : JSX.Element
+>Comp : (p: Prop) => JSX.Element
+>a : number
+>10 : 10
+>b : string
+><Button /> : JSX.Element
+>Button : typeof Button
+>Comp : (p: Prop) => JSX.Element
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty9.js b/tests/baselines/reference/checkJsxChildrenProperty9.js
new file mode 100644
index 0000000000000..017fb3ac41fa6
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty9.js
@@ -0,0 +1,16 @@
+//// [file.tsx]
+import React = require('react');
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+
+//// [file.jsx]
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+// OK
+var k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+var k2 = <div> <h2> Hello </h2> {function (user) { return <h2>{user.name}</h2>; }}</div>;
+var k3 = <div> {1} {"That is a number"} </div>;
diff --git a/tests/baselines/reference/checkJsxChildrenProperty9.symbols b/tests/baselines/reference/checkJsxChildrenProperty9.symbols
new file mode 100644
index 0000000000000..25a32aae695f8
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty9.symbols
@@ -0,0 +1,30 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : Symbol(React, Decl(file.tsx, 0, 0))
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : Symbol(k1, Decl(file.tsx, 3, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : Symbol(k2, Decl(file.tsx, 4, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>user : Symbol(user, Decl(file.tsx, 4, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>user : Symbol(user, Decl(file.tsx, 4, 34))
+>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : Symbol(k3, Decl(file.tsx, 5, 3))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+
diff --git a/tests/baselines/reference/checkJsxChildrenProperty9.types b/tests/baselines/reference/checkJsxChildrenProperty9.types
new file mode 100644
index 0000000000000..cf76f05143023
--- /dev/null
+++ b/tests/baselines/reference/checkJsxChildrenProperty9.types
@@ -0,0 +1,42 @@
+=== tests/cases/conformance/jsx/file.tsx ===
+import React = require('react');
+>React : typeof React
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+>k1 : JSX.Element
+><div> <h2> Hello </h2> <h1> world </h1></div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+><h1> world </h1> : JSX.Element
+>h1 : any
+>h1 : any
+>div : any
+
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+>k2 : JSX.Element
+><div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div> : JSX.Element
+>div : any
+><h2> Hello </h2> : JSX.Element
+>h2 : any
+>h2 : any
+>(user: any) => <h2>{user.name}</h2> : (user: any) => JSX.Element
+>user : any
+><h2>{user.name}</h2> : JSX.Element
+>h2 : any
+>user.name : any
+>user : any
+>name : any
+>h2 : any
+>div : any
+
+let k3 = <div> {1} {"That is a number"} </div>;
+>k3 : JSX.Element
+><div> {1} {"That is a number"} </div> : JSX.Element
+>div : any
+>1 : 1
+>"That is a number" : "That is a number"
+>div : any
+
diff --git a/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols b/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
index 900aa7cf84225..ff8926b0ab0c8 100644
--- a/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
+++ b/tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
@@ -19,8 +19,8 @@ class Poisoned extends React.Component<Prop, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 5, 50))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols b/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
index 766505b551812..61d007ddbefa3 100644
--- a/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
+++ b/tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
@@ -19,8 +19,8 @@ class Poisoned extends React.Component<Prop, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 5, 50))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
index cc669b485e427..273ea39281aed 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
@@ -12,8 +12,8 @@ class Poisoned extends React.Component<{}, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 2, 48))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
index f8c0bc4cf1f91..5646934ef4155 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
@@ -48,8 +48,8 @@ class OverWriteAttr extends React.Component<Prop, {}> {
 >render : Symbol(OverWriteAttr.render, Decl(file.tsx, 17, 55))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
index ade152b687de4..05de039a49a68 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
@@ -23,8 +23,8 @@ class Poisoned extends React.Component<PoisonedProp, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 7, 58))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
index c6b44bcd42859..93d8535658e8c 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
@@ -23,8 +23,8 @@ class Poisoned extends React.Component<PoisonedProp, {}> {
 >render : Symbol(Poisoned.render, Decl(file.tsx, 7, 58))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
@@ -56,8 +56,8 @@ class EmptyProp extends React.Component<{}, {}> {
 >render : Symbol(EmptyProp.render, Decl(file.tsx, 21, 49))
 
         return <div>Default hi</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
index d3f967ca2e7d5..8a6e3fd317b2e 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
@@ -22,8 +22,8 @@ class TextComponent extends React.Component<TextProps, {}> {
 >render : Symbol(TextComponent.render, Decl(file.tsx, 5, 60))
 
         return <span>Some Text..</span>;
->span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2458, 51))
->span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2458, 51))
+>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2460, 51))
+>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2460, 51))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
index 6bfe0932173e6..2dec493b88676 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
@@ -45,8 +45,8 @@ class OverWriteAttr extends React.Component<Prop, {}> {
 >render : Symbol(OverWriteAttr.render, Decl(file.tsx, 17, 55))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols b/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
index ba9a28bfc1e41..f55b20dfe64c4 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
@@ -23,8 +23,8 @@ class Opt extends React.Component<OptionProp, {}> {
 >render : Symbol(Opt.render, Decl(file.tsx, 7, 51))
 
         return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
     }
 }
 
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.js b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.js
index 825a625eb29cc..09eb20c755fd0 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.js
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.js
@@ -2,6 +2,7 @@
 import React = require('react')
 
 declare function OneThing(k: {yxx: string}): JSX.Element;
+declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
 declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
 declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
 declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
@@ -11,6 +12,8 @@ const c1 = <OneThing yxx='ok' />
 const c2 = <OneThing yy={100}  yy1="hello"/>
 const c3 = <OneThing yxx="hello" ignore-prop />
 const c4 = <OneThing data="hello" data-prop />
+const c5 = <OneThing yxx1='ok'>Hello</OneThing>
+
 
 declare function TestingOneThing({y1: string}): JSX.Element;
 declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;
@@ -48,6 +51,7 @@ define(["require", "exports", "react"], function (require, exports, React) {
     var c2 = <OneThing yy={100} yy1="hello"/>;
     var c3 = <OneThing yxx="hello" ignore-prop/>;
     var c4 = <OneThing data="hello" data-prop/>;
+    var c5 = <OneThing yxx1='ok'>Hello</OneThing>;
     // OK
     var d1 = <TestingOneThing y1 extra-data/>;
     var d2 = <TestingOneThing extra-data="hello"/>;
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.symbols b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.symbols
index b2de411e24754..809766f59d385 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.symbols
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.symbols
@@ -3,173 +3,188 @@ import React = require('react')
 >React : Symbol(React, Decl(file.tsx, 0, 0))
 
 declare function OneThing(k: {yxx: string}): JSX.Element;
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
 >k : Symbol(k, Decl(file.tsx, 2, 26))
 >yxx : Symbol(yxx, Decl(file.tsx, 2, 30))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
-declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->l : Symbol(l, Decl(file.tsx, 3, 26))
->yy : Symbol(yy, Decl(file.tsx, 3, 30))
->yy1 : Symbol(yy1, Decl(file.tsx, 3, 41))
+declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>k : Symbol(k, Decl(file.tsx, 3, 26))
+>yxx1 : Symbol(yxx1, Decl(file.tsx, 3, 30))
+>children : Symbol(children, Decl(file.tsx, 3, 43))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
-declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
+declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
 >l : Symbol(l, Decl(file.tsx, 4, 26))
 >yy : Symbol(yy, Decl(file.tsx, 4, 30))
 >yy1 : Symbol(yy1, Decl(file.tsx, 4, 41))
->yy2 : Symbol(yy2, Decl(file.tsx, 4, 54))
+>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
+>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
+
+declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>l : Symbol(l, Decl(file.tsx, 5, 26))
+>yy : Symbol(yy, Decl(file.tsx, 5, 30))
+>yy1 : Symbol(yy1, Decl(file.tsx, 5, 41))
+>yy2 : Symbol(yy2, Decl(file.tsx, 5, 54))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->l1 : Symbol(l1, Decl(file.tsx, 5, 26))
->data : Symbol(data, Decl(file.tsx, 5, 31))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>l1 : Symbol(l1, Decl(file.tsx, 6, 26))
+>data : Symbol(data, Decl(file.tsx, 6, 31))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 // OK
 const c1 = <OneThing yxx='ok' />
->c1 : Symbol(c1, Decl(file.tsx, 8, 5))
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->yxx : Symbol(yxx, Decl(file.tsx, 8, 20))
+>c1 : Symbol(c1, Decl(file.tsx, 9, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>yxx : Symbol(yxx, Decl(file.tsx, 9, 20))
 
 const c2 = <OneThing yy={100}  yy1="hello"/>
->c2 : Symbol(c2, Decl(file.tsx, 9, 5))
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->yy : Symbol(yy, Decl(file.tsx, 9, 20))
->yy1 : Symbol(yy1, Decl(file.tsx, 9, 29))
+>c2 : Symbol(c2, Decl(file.tsx, 10, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>yy : Symbol(yy, Decl(file.tsx, 10, 20))
+>yy1 : Symbol(yy1, Decl(file.tsx, 10, 29))
 
 const c3 = <OneThing yxx="hello" ignore-prop />
->c3 : Symbol(c3, Decl(file.tsx, 10, 5))
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->yxx : Symbol(yxx, Decl(file.tsx, 10, 20))
->ignore-prop : Symbol(ignore-prop, Decl(file.tsx, 10, 32))
+>c3 : Symbol(c3, Decl(file.tsx, 11, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>yxx : Symbol(yxx, Decl(file.tsx, 11, 20))
+>ignore-prop : Symbol(ignore-prop, Decl(file.tsx, 11, 32))
 
 const c4 = <OneThing data="hello" data-prop />
->c4 : Symbol(c4, Decl(file.tsx, 11, 5))
->OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
->data : Symbol(data, Decl(file.tsx, 11, 20))
->data-prop : Symbol(data-prop, Decl(file.tsx, 11, 33))
+>c4 : Symbol(c4, Decl(file.tsx, 12, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>data : Symbol(data, Decl(file.tsx, 12, 20))
+>data-prop : Symbol(data-prop, Decl(file.tsx, 12, 33))
+
+const c5 = <OneThing yxx1='ok'>Hello</OneThing>
+>c5 : Symbol(c5, Decl(file.tsx, 13, 5))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+>yxx1 : Symbol(yxx1, Decl(file.tsx, 13, 20))
+>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
+
 
 declare function TestingOneThing({y1: string}): JSX.Element;
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
 >y1 : Symbol(y1)
->string : Symbol(string, Decl(file.tsx, 13, 34))
+>string : Symbol(string, Decl(file.tsx, 16, 34))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->j : Symbol(j, Decl(file.tsx, 14, 33))
->yy : Symbol(yy, Decl(file.tsx, 14, 58))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>j : Symbol(j, Decl(file.tsx, 17, 33))
+>yy : Symbol(yy, Decl(file.tsx, 17, 58))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function TestingOneThing(n: {yy: number, direction?: number}): JSX.Element;
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->n : Symbol(n, Decl(file.tsx, 15, 33))
->yy : Symbol(yy, Decl(file.tsx, 15, 37))
->direction : Symbol(direction, Decl(file.tsx, 15, 48))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>n : Symbol(n, Decl(file.tsx, 18, 33))
+>yy : Symbol(yy, Decl(file.tsx, 18, 37))
+>direction : Symbol(direction, Decl(file.tsx, 18, 48))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function TestingOneThing(n: {yy: string, name: string}): JSX.Element;
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->n : Symbol(n, Decl(file.tsx, 16, 33))
->yy : Symbol(yy, Decl(file.tsx, 16, 37))
->name : Symbol(name, Decl(file.tsx, 16, 48))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>n : Symbol(n, Decl(file.tsx, 19, 33))
+>yy : Symbol(yy, Decl(file.tsx, 19, 37))
+>name : Symbol(name, Decl(file.tsx, 19, 48))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 // OK
 const d1 = <TestingOneThing y1 extra-data />;
->d1 : Symbol(d1, Decl(file.tsx, 19, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->y1 : Symbol(y1, Decl(file.tsx, 19, 27))
->extra-data : Symbol(extra-data, Decl(file.tsx, 19, 30))
+>d1 : Symbol(d1, Decl(file.tsx, 22, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>y1 : Symbol(y1, Decl(file.tsx, 22, 27))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 22, 30))
 
 const d2 = <TestingOneThing extra-data="hello" />;
->d2 : Symbol(d2, Decl(file.tsx, 20, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->extra-data : Symbol(extra-data, Decl(file.tsx, 20, 27))
+>d2 : Symbol(d2, Decl(file.tsx, 23, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 23, 27))
 
 const d3 = <TestingOneThing extra-data="hello" yy="hihi" />;
->d3 : Symbol(d3, Decl(file.tsx, 21, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->extra-data : Symbol(extra-data, Decl(file.tsx, 21, 27))
->yy : Symbol(yy, Decl(file.tsx, 21, 46))
+>d3 : Symbol(d3, Decl(file.tsx, 24, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 24, 27))
+>yy : Symbol(yy, Decl(file.tsx, 24, 46))
 
 const d4 = <TestingOneThing extra-data="hello" yy={9} direction={10} />;
->d4 : Symbol(d4, Decl(file.tsx, 22, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->extra-data : Symbol(extra-data, Decl(file.tsx, 22, 27))
->yy : Symbol(yy, Decl(file.tsx, 22, 46))
->direction : Symbol(direction, Decl(file.tsx, 22, 53))
+>d4 : Symbol(d4, Decl(file.tsx, 25, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 25, 27))
+>yy : Symbol(yy, Decl(file.tsx, 25, 46))
+>direction : Symbol(direction, Decl(file.tsx, 25, 53))
 
 const d5 = <TestingOneThing extra-data="hello" yy="hello" name="Bob" />;
->d5 : Symbol(d5, Decl(file.tsx, 23, 5))
->TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
->extra-data : Symbol(extra-data, Decl(file.tsx, 23, 27))
->yy : Symbol(yy, Decl(file.tsx, 23, 46))
->name : Symbol(name, Decl(file.tsx, 23, 57))
+>d5 : Symbol(d5, Decl(file.tsx, 26, 5))
+>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
+>extra-data : Symbol(extra-data, Decl(file.tsx, 26, 27))
+>yy : Symbol(yy, Decl(file.tsx, 26, 46))
+>name : Symbol(name, Decl(file.tsx, 26, 57))
 
 
 declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->a : Symbol(a, Decl(file.tsx, 26, 33))
->y1 : Symbol(y1, Decl(file.tsx, 26, 37))
->y2 : Symbol(y2, Decl(file.tsx, 26, 49))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>a : Symbol(a, Decl(file.tsx, 29, 33))
+>y1 : Symbol(y1, Decl(file.tsx, 29, 37))
+>y2 : Symbol(y2, Decl(file.tsx, 29, 49))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->a : Symbol(a, Decl(file.tsx, 27, 33))
->y1 : Symbol(y1, Decl(file.tsx, 27, 37))
->y2 : Symbol(y2, Decl(file.tsx, 27, 49))
->y3 : Symbol(y3, Decl(file.tsx, 27, 62))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>a : Symbol(a, Decl(file.tsx, 30, 33))
+>y1 : Symbol(y1, Decl(file.tsx, 30, 37))
+>y2 : Symbol(y2, Decl(file.tsx, 30, 49))
+>y3 : Symbol(y3, Decl(file.tsx, 30, 62))
 >JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
 >Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
 
 // OK
 const e1 = <TestingOptional />
->e1 : Symbol(e1, Decl(file.tsx, 30, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
+>e1 : Symbol(e1, Decl(file.tsx, 33, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
 
 const e2 = <TestingOptional extra-prop/>
->e2 : Symbol(e2, Decl(file.tsx, 31, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->extra-prop : Symbol(extra-prop, Decl(file.tsx, 31, 27))
+>e2 : Symbol(e2, Decl(file.tsx, 34, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>extra-prop : Symbol(extra-prop, Decl(file.tsx, 34, 27))
 
 const e3 = <TestingOptional y1="hello"/>
->e3 : Symbol(e3, Decl(file.tsx, 32, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->y1 : Symbol(y1, Decl(file.tsx, 32, 27))
+>e3 : Symbol(e3, Decl(file.tsx, 35, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>y1 : Symbol(y1, Decl(file.tsx, 35, 27))
 
 const e4 = <TestingOptional y1="hello" y2={1000} />
->e4 : Symbol(e4, Decl(file.tsx, 33, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->y1 : Symbol(y1, Decl(file.tsx, 33, 27))
->y2 : Symbol(y2, Decl(file.tsx, 33, 38))
+>e4 : Symbol(e4, Decl(file.tsx, 36, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>y1 : Symbol(y1, Decl(file.tsx, 36, 27))
+>y2 : Symbol(y2, Decl(file.tsx, 36, 38))
 
 const e5 = <TestingOptional y1 y3/>
->e5 : Symbol(e5, Decl(file.tsx, 34, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->y1 : Symbol(y1, Decl(file.tsx, 34, 27))
->y3 : Symbol(y3, Decl(file.tsx, 34, 30))
+>e5 : Symbol(e5, Decl(file.tsx, 37, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>y1 : Symbol(y1, Decl(file.tsx, 37, 27))
+>y3 : Symbol(y3, Decl(file.tsx, 37, 30))
 
 const e6 = <TestingOptional y1 y3 y2={10} />
->e6 : Symbol(e6, Decl(file.tsx, 35, 5))
->TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
->y1 : Symbol(y1, Decl(file.tsx, 35, 27))
->y3 : Symbol(y3, Decl(file.tsx, 35, 30))
->y2 : Symbol(y2, Decl(file.tsx, 35, 33))
+>e6 : Symbol(e6, Decl(file.tsx, 38, 5))
+>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
+>y1 : Symbol(y1, Decl(file.tsx, 38, 27))
+>y3 : Symbol(y3, Decl(file.tsx, 38, 30))
+>y2 : Symbol(y2, Decl(file.tsx, 38, 33))
 
 
 
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.types b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.types
index 22ef23bcae9a3..8e288ebd34ab0 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.types
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload1.types
@@ -3,14 +3,22 @@ import React = require('react')
 >React : typeof React
 
 declare function OneThing(k: {yxx: string}): JSX.Element;
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >k : { yxx: string; }
 >yxx : string
 >JSX : any
 >Element : JSX.Element
 
+declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>k : { yxx1: string; children: string; }
+>yxx1 : string
+>children : string
+>JSX : any
+>Element : JSX.Element
+
 declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >l : { yy: number; yy1: string; }
 >yy : number
 >yy1 : string
@@ -18,7 +26,7 @@ declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
 >Element : JSX.Element
 
 declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >l : { yy: number; yy1: string; yy2: boolean; }
 >yy : number
 >yy1 : string
@@ -27,7 +35,7 @@ declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Eleme
 >Element : JSX.Element
 
 declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >l1 : { data: string; "data-prop": boolean; }
 >data : string
 >JSX : any
@@ -37,13 +45,13 @@ declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element
 const c1 = <OneThing yxx='ok' />
 >c1 : JSX.Element
 ><OneThing yxx='ok' /> : JSX.Element
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >yxx : string
 
 const c2 = <OneThing yy={100}  yy1="hello"/>
 >c2 : JSX.Element
 ><OneThing yy={100}  yy1="hello"/> : JSX.Element
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >yy : number
 >100 : 100
 >yy1 : string
@@ -51,17 +59,25 @@ const c2 = <OneThing yy={100}  yy1="hello"/>
 const c3 = <OneThing yxx="hello" ignore-prop />
 >c3 : JSX.Element
 ><OneThing yxx="hello" ignore-prop /> : JSX.Element
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >yxx : string
 >ignore-prop : true
 
 const c4 = <OneThing data="hello" data-prop />
 >c4 : JSX.Element
 ><OneThing data="hello" data-prop /> : JSX.Element
->OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
 >data : string
 >data-prop : true
 
+const c5 = <OneThing yxx1='ok'>Hello</OneThing>
+>c5 : JSX.Element
+><OneThing yxx1='ok'>Hello</OneThing> : JSX.Element
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+>yxx1 : string
+>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
+
+
 declare function TestingOneThing({y1: string}): JSX.Element;
 >TestingOneThing : { ({y1: string}: { y1: any; }): JSX.Element; (j: { "extra-data": string; yy?: string; }): JSX.Element; (n: { yy: number; direction?: number; }): JSX.Element; (n: { yy: string; name: string; }): JSX.Element; }
 >y1 : any
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
index 9995610b8746e..b59b1dd44f478 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
@@ -22,17 +22,21 @@ tests/cases/conformance/jsx/file.tsx(26,29): error TS2322: Type '{ yy: "hello";
   Type '{ yy: "hello"; direction: "left"; }' is not assignable to type '{ yy: string; direction?: number; }'.
     Types of property 'direction' are incompatible.
       Type '"left"' is not assignable to type 'number'.
-tests/cases/conformance/jsx/file.tsx(32,29): error TS2322: Type '{ y1: true; y3: "hello"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: true; y3: "hello"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
   Type '{ y1: true; y3: "hello"; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
     Types of property 'y3' are incompatible.
       Type '"hello"' is not assignable to type 'boolean'.
-tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+tests/cases/conformance/jsx/file.tsx(34,29): error TS2322: Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
   Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
     Types of property 'y1' are incompatible.
       Type '"hello"' is not assignable to type 'boolean'.
+tests/cases/conformance/jsx/file.tsx(35,29): error TS2322: Type '{ y1: "hello"; y2: 1000; children: "hi"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+  Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+tests/cases/conformance/jsx/file.tsx(36,29): error TS2322: Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+  Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
 
 
-==== tests/cases/conformance/jsx/file.tsx (10 errors) ====
+==== tests/cases/conformance/jsx/file.tsx (12 errors) ====
     import React = require('react')
     declare function OneThing(): JSX.Element;
     declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
@@ -93,6 +97,7 @@ tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: "hello";
 !!! error TS2322:       Type '"left"' is not assignable to type 'number'.
     
     declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
+    declare function TestingOptional(a: {y1?: string, y2?: number, children: JSX.Element}): JSX.Element;
     declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
     
     // Error
@@ -108,4 +113,12 @@ tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: "hello";
 !!! error TS2322:   Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
 !!! error TS2322:     Types of property 'y1' are incompatible.
 !!! error TS2322:       Type '"hello"' is not assignable to type 'boolean'.
+    const e3 = <TestingOptional y1="hello" y2={1000} children="hi" />
+                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2322: Type '{ y1: "hello"; y2: 1000; children: "hi"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+!!! error TS2322:   Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+    const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>
+                                ~~~~~~~~~~~~~~~~~~~~
+!!! error TS2322: Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
+!!! error TS2322:   Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
     
\ No newline at end of file
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.js b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.js
index a4d329409a273..8da2bee37ea5c 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.js
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload4.js
@@ -27,11 +27,14 @@ const d1 = <TestingOneThing extra-data />
 const d2 = <TestingOneThing yy="hello" direction="left" />
 
 declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
+declare function TestingOptional(a: {y1?: string, y2?: number, children: JSX.Element}): JSX.Element;
 declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
 
 // Error
 const e1 = <TestingOptional y1 y3="hello"/>
 const e2 = <TestingOptional y1="hello" y2={1000} y3 />
+const e3 = <TestingOptional y1="hello" y2={1000} children="hi" />
+const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>
 
 
 //// [file.jsx]
@@ -58,4 +61,6 @@ define(["require", "exports", "react"], function (require, exports, React) {
     // Error
     var e1 = <TestingOptional y1 y3="hello"/>;
     var e2 = <TestingOptional y1="hello" y2={1000} y3/>;
+    var e3 = <TestingOptional y1="hello" y2={1000} children="hi"/>;
+    var e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>;
 });
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt b/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
index 0333a6810cb7f..a7b787c1c1830 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
@@ -1,6 +1,6 @@
-tests/cases/conformance/jsx/file.tsx(48,24): error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
+tests/cases/conformance/jsx/file.tsx(48,24): error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
   Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
-tests/cases/conformance/jsx/file.tsx(49,24): error TS2322: Type '{ to: string; onClick: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
+tests/cases/conformance/jsx/file.tsx(49,24): error TS2322: Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
   Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
 tests/cases/conformance/jsx/file.tsx(50,24): error TS2322: Type '{ onClick: () => void; to: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
   Property 'onClick' does not exist on type 'IntrinsicAttributes & HyphenProps'.
@@ -68,11 +68,11 @@ tests/cases/conformance/jsx/file.tsx(56,24): error TS2322: Type '{ data-format:
     // Error
     const b0 = <MainButton to='/some/path' onClick={(e)=>{}}>GO</MainButton>;  // extra property;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-!!! error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
+!!! error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
 !!! error TS2322:   Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
     const b1 = <MainButton onClick={(e: any)=> {}} {...obj0}>Hello world</MainButton>;  // extra property;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-!!! error TS2322: Type '{ to: string; onClick: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
+!!! error TS2322: Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
 !!! error TS2322:   Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
     const b2 = <MainButton {...{to: "10000"}} {...obj2} />;  // extra property
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.js b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.js
index 92219fb662b0e..c1ec4ccd0bf7a 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.js
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.js
@@ -50,7 +50,7 @@ const b6 = <MainButton {...obj2} />;
 const b7 = <MainButton {...{onClick: () => { console.log("hi") }}} />;
 const b8 = <MainButton {...{onClick() {}}} />;  // OK; method declaration get retained (See GitHub #13365)
 const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
-const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
 const b11 = <MainButton onClick={(e) => {}} className="hello" data-format>Hello world</MainButton>;
 const b12 = <MainButton data-format="Hello world" />
 
@@ -88,7 +88,7 @@ define(["require", "exports", "react"], function (require, exports, React) {
     var b7 = <MainButton {...{ onClick: function () { console.log("hi"); } }}/>;
     var b8 = <MainButton {...{ onClick: function () { } }}/>; // OK; method declaration get retained (See GitHub #13365)
     var b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
-    var b10 = <MainButton to='/some/path' children="hi">GO</MainButton>;
+    var b10 = <MainButton to='/some/path' children="hi"></MainButton>;
     var b11 = <MainButton onClick={function (e) { }} className="hello" data-format>Hello world</MainButton>;
     var b12 = <MainButton data-format="Hello world"/>;
 });
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.symbols b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.symbols
index d1f7cfadf9a13..c644448497317 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.symbols
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.symbols
@@ -165,7 +165,7 @@ const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
 >extra-prop : Symbol(extra-prop, Decl(file.tsx, 50, 38))
 >MainButton : Symbol(MainButton, Decl(file.tsx, 26, 1), Decl(file.tsx, 28, 66), Decl(file.tsx, 29, 62), Decl(file.tsx, 30, 66))
 
-const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
 >b10 : Symbol(b10, Decl(file.tsx, 51, 5))
 >MainButton : Symbol(MainButton, Decl(file.tsx, 26, 1), Decl(file.tsx, 28, 66), Decl(file.tsx, 29, 62), Decl(file.tsx, 30, 66))
 >to : Symbol(to, Decl(file.tsx, 51, 23))
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.types b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.types
index 0db50bc1903b1..6f7f04e3cf3b3 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.types
+++ b/tests/baselines/reference/tsxStatelessFunctionComponentOverload6.types
@@ -197,9 +197,9 @@ const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
 >extra-prop : true
 >MainButton : { (buttonProps: ButtonProps): JSX.Element; (linkProps: LinkProps): JSX.Element; (hyphenProps: HyphenProps): JSX.Element; }
 
-const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
 >b10 : JSX.Element
-><MainButton to='/some/path' children="hi" >GO</MainButton> : JSX.Element
+><MainButton to='/some/path' children="hi" ></MainButton> : JSX.Element
 >MainButton : { (buttonProps: ButtonProps): JSX.Element; (linkProps: LinkProps): JSX.Element; (hyphenProps: HyphenProps): JSX.Element; }
 >to : string
 >children : string
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols b/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
index a75b5f30c81e8..a18da7954bc56 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
+++ b/tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
@@ -5,7 +5,7 @@ import React = require('react');
 const Foo = (props: any) => <div/>;
 >Foo : Symbol(Foo, Decl(file.tsx, 2, 5))
 >props : Symbol(props, Decl(file.tsx, 2, 13))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 // Should be OK
 const foo = <Foo />;
@@ -19,14 +19,14 @@ var MainMenu: React.StatelessComponent<{}> = (props) => (<div>
 >React : Symbol(React, Decl(file.tsx, 0, 0))
 >StatelessComponent : Symbol(React.StatelessComponent, Decl(react.d.ts, 197, 40))
 >props : Symbol(props, Decl(file.tsx, 8, 46))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
     <h3>Main Menu</h3>
->h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2409, 48))
->h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2409, 48))
+>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2411, 48))
+>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2411, 48))
 
 </div>);
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 var App: React.StatelessComponent<{ children }> = ({children}) => (
 >App : Symbol(App, Decl(file.tsx, 12, 3))
@@ -36,12 +36,12 @@ var App: React.StatelessComponent<{ children }> = ({children}) => (
 >children : Symbol(children, Decl(file.tsx, 12, 52))
 
     <div >
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
         <MainMenu/>
 >MainMenu : Symbol(MainMenu, Decl(file.tsx, 8, 3))
 
 	</div>
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 );
diff --git a/tests/baselines/reference/tsxUnionElementType1.symbols b/tests/baselines/reference/tsxUnionElementType1.symbols
index da0639ac5f15f..728e559ee65d8 100644
--- a/tests/baselines/reference/tsxUnionElementType1.symbols
+++ b/tests/baselines/reference/tsxUnionElementType1.symbols
@@ -8,8 +8,8 @@ function SFC1(prop: { x: number }) {
 >x : Symbol(x, Decl(file.tsx, 2, 21))
 
     return <div>hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 
 };
 
@@ -19,8 +19,8 @@ function SFC2(prop: { x: boolean }) {
 >x : Symbol(x, Decl(file.tsx, 6, 21))
 
     return <h1>World </h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 }
 
 var SFCComp = SFC1 || SFC2;
diff --git a/tests/baselines/reference/tsxUnionElementType5.symbols b/tests/baselines/reference/tsxUnionElementType5.symbols
index e05f3deb9cca6..9a5e94f69a319 100644
--- a/tests/baselines/reference/tsxUnionElementType5.symbols
+++ b/tests/baselines/reference/tsxUnionElementType5.symbols
@@ -6,16 +6,16 @@ function EmptySFC1() {
 >EmptySFC1 : Symbol(EmptySFC1, Decl(file.tsx, 0, 32))
 
     return <div>hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 }
 
 function EmptySFC2() {
 >EmptySFC2 : Symbol(EmptySFC2, Decl(file.tsx, 4, 1))
 
     return <div>Hello</div>;
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
->div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
 }
 
 function SFC2(prop: { x: boolean }) {
@@ -24,8 +24,8 @@ function SFC2(prop: { x: boolean }) {
 >x : Symbol(x, Decl(file.tsx, 10, 21))
 
     return <h1>World</h1>;
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
->h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
 }
 
 var EmptySFCComp = EmptySFC1 || EmptySFC2;
diff --git a/tests/baselines/reference/tsxUnionTypeComponent1.symbols b/tests/baselines/reference/tsxUnionTypeComponent1.symbols
index ec57cfaa2de55..4af712bf3fc3e 100644
--- a/tests/baselines/reference/tsxUnionTypeComponent1.symbols
+++ b/tests/baselines/reference/tsxUnionTypeComponent1.symbols
@@ -38,8 +38,8 @@ class MyComponent extends React.Component<ComponentProps, {}> {
 <MyComponent AnyComponent={() => <button>test</button>}/>
 >MyComponent : Symbol(MyComponent, Decl(file.tsx, 4, 1))
 >AnyComponent : Symbol(AnyComponent, Decl(file.tsx, 14, 12))
->button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2383, 43))
->button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2383, 43))
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2385, 43))
+>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2385, 43))
 
 // Component Class as Props
 class MyButtonComponent extends React.Component<{},{}> {
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx
new file mode 100644
index 0000000000000..70b58c03f6ac1
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx
@@ -0,0 +1,27 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k = <Comp a={10} b="hi" children ="lol" />;
+let k1 =
+    <Comp a={10} b="hi">
+        hi hi hi!
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        <div>hi hi hi!</div>
+    </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty10.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty10.tsx
new file mode 100644
index 0000000000000..f13f44567ffb4
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty10.tsx
@@ -0,0 +1,24 @@
+//@filename: file.tsx
+//@jsx: preserve
+declare module JSX {
+	interface Element { }
+	interface ElementAttributesProperty { props: {} }
+	interface IntrinsicElements { 
+		div: any;
+		h2: any;
+		h1: any;
+	}
+}
+
+class Button {
+	props: {}
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+let k4 = <Button> <h2> Hello </h2> </Button>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty11.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty11.tsx
new file mode 100644
index 0000000000000..a6fab6f506e66
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty11.tsx
@@ -0,0 +1,25 @@
+//@filename: file.tsx
+//@jsx: preserve
+//@noImplicitAny: true
+declare module JSX {
+	interface Element { }
+	interface ElementAttributesProperty { props: {} }
+	interface IntrinsicElements { 
+		div: any;
+		h2: any;
+		h1: any;
+	}
+}
+
+class Button {
+	props: {}
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
+let k4 = <Button> <h2> Hello </h2> </Button>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
new file mode 100644
index 0000000000000..65bc0f50b120a
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx
@@ -0,0 +1,57 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: missing children
+let k = <Comp a={10} b="hi" />;
+
+let k0 =
+    <Comp a={10} b="hi" children="Random" >
+        hi hi hi!
+    </Comp>;
+
+let o = {
+     children:"Random"
+}
+let k1 =
+    <Comp a={10} b="hi" {...o} >
+        hi hi hi!
+    </Comp>;
+
+// Error: incorrect type
+let k2 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {(name: string) => <div> My name {name} </div>}
+    </Comp>;
+
+let k3 =
+    <Comp a={10} b="hi">
+        <div> My Div </div>
+        {1000000}
+    </Comp>;
+
+let k4 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        hi hi hi!
+    </Comp>;
+
+let k5 =
+    <Comp a={10} b="hi" >
+        <div> My Div </div>
+        <div> My Div </div>
+    </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx
new file mode 100644
index 0000000000000..c67c6d5440dce
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx
@@ -0,0 +1,44 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Ok
+function UserName0() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx
new file mode 100644
index 0000000000000..34877f2000cd3
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx
@@ -0,0 +1,49 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface IUser {
+    Name: string;
+}
+
+interface IFetchUserProps {
+    children: (user: IUser) => JSX.Element;
+}
+
+class FetchUser extends React.Component<IFetchUserProps, any> {
+    render() {
+        return this.state
+            ? this.props.children(this.state.result)
+            : null;
+    }
+}
+
+// Error
+function UserName() {
+    return (
+        <FetchUser>
+            { user => (
+                <h1>{ user.NAme }</h1>
+            ) }
+        </FetchUser>
+    );
+}
+
+function UserName1() {
+    return (
+        <FetchUser>
+
+
+            
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+            { user => (
+                <h1>{ user.Name }</h1>
+            ) }
+        </FetchUser>
+    );
+}
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx
new file mode 100644
index 0000000000000..6143e4b0fafa9
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx
@@ -0,0 +1,35 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: Button;
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: no children specified
+let k = <Comp a={10} b="hi" />;
+
+// Error: JSX.element is not the same as JSX.ElementClass
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+    </Comp>;
+let k2 =
+    <Comp a={10} b="hi">
+        {Button}
+    </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx
new file mode 100644
index 0000000000000..c7c709dd369d3
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx
@@ -0,0 +1,48 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Ok
+let k1 =
+    <Comp a={10} b="hi">
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k2 =
+    <Comp a={10} b="hi">
+     
+    
+    
+        <Button />
+        <AnotherButton />
+    </Comp>;
+
+let k3 = <Comp a={10} b="hi"><Button />  
+<AnotherButton />
+</Comp>;
+
+let k4 = <Comp a={10} b="hi"><Button /></Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx
new file mode 100644
index 0000000000000..82297737a11de
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx
@@ -0,0 +1,33 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: JSX.Element | JSX.Element[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// Error: whitespaces matters
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
new file mode 100644
index 0000000000000..44e9f7e065248
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx
@@ -0,0 +1,34 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+interface Prop {
+    a: number,
+    b: string,
+    children: string | JSX.Element | (string | JSX.Element)[];
+}
+
+class Button extends React.Component<any, any> {
+    render() {
+        return (<div>My Button</div>)
+    }
+}
+
+function AnotherButton(p: any) {
+    return <h1>Just Another Button</h1>;
+}
+
+function Comp(p: Prop) {
+    return <div>{p.b}</div>;
+}
+
+// OK
+let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
+let k2 = <Comp a={10} b="hi"><Button />
+    <AnotherButton />  </Comp>;
+let k3 = <Comp a={10} b="hi">    <Button />
+    <AnotherButton /></Comp>;
+let k4 = <Comp a={10} b="hi"><Button />  </Comp>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/checkJsxChildrenProperty9.tsx b/tests/cases/conformance/jsx/checkJsxChildrenProperty9.tsx
new file mode 100644
index 0000000000000..5453262b7d474
--- /dev/null
+++ b/tests/cases/conformance/jsx/checkJsxChildrenProperty9.tsx
@@ -0,0 +1,11 @@
+// @filename: file.tsx
+// @jsx: preserve
+// @noLib: true
+// @libFiles: react.d.ts,lib.d.ts
+
+import React = require('react');
+
+// OK
+let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
+let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
+let k3 = <div> {1} {"That is a number"} </div>;
\ No newline at end of file
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx
index ea950d8b6d488..d8897321f0b3d 100644
--- a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx
@@ -7,6 +7,7 @@
 import React = require('react')
 
 declare function OneThing(k: {yxx: string}): JSX.Element;
+declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
 declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
 declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
 declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
@@ -16,6 +17,8 @@ const c1 = <OneThing yxx='ok' />
 const c2 = <OneThing yy={100}  yy1="hello"/>
 const c3 = <OneThing yxx="hello" ignore-prop />
 const c4 = <OneThing data="hello" data-prop />
+const c5 = <OneThing yxx1='ok'>Hello</OneThing>
+
 
 declare function TestingOneThing({y1: string}): JSX.Element;
 declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx
index 377878931b818..7700fed6902b3 100644
--- a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx
@@ -32,8 +32,11 @@ const d1 = <TestingOneThing extra-data />
 const d2 = <TestingOneThing yy="hello" direction="left" />
 
 declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
+declare function TestingOptional(a: {y1?: string, y2?: number, children: JSX.Element}): JSX.Element;
 declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
 
 // Error
 const e1 = <TestingOptional y1 y3="hello"/>
 const e2 = <TestingOptional y1="hello" y2={1000} y3 />
+const e3 = <TestingOptional y1="hello" y2={1000} children="hi" />
+const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>
diff --git a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
index ac0e990142751..f2e799c1c8fce 100644
--- a/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
+++ b/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
@@ -55,7 +55,7 @@ const b6 = <MainButton {...obj2} />;
 const b7 = <MainButton {...{onClick: () => { console.log("hi") }}} />;
 const b8 = <MainButton {...{onClick() {}}} />;  // OK; method declaration get retained (See GitHub #13365)
 const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
-const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
+const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
 const b11 = <MainButton onClick={(e) => {}} className="hello" data-format>Hello world</MainButton>;
 const b12 = <MainButton data-format="Hello world" />
 
diff --git a/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback.ts b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback.ts
new file mode 100644
index 0000000000000..911fa41470dc8
--- /dev/null
+++ b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback.ts
@@ -0,0 +1,30 @@
+/// <reference path='fourslash.ts' />
+//@module: commonjs
+//@jsx: preserve
+
+// @Filename: 1.tsx
+//// declare module JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////     }
+////     interface ElementAttributesProperty { props; }
+//// }
+//// interface IUser {
+////     Name: string;
+//// }
+//// interface IFetchUserProps {
+////     children: (user: IUser) => any;
+//// }
+//// function FetchUser(props: IFetchUserProps) { return undefined; }
+//// function UserName() {
+////     return (
+////         <FetchUser>
+////             { user => (
+////                 <h1>{ user./**/ }</h1> 
+////             )}
+////         </FetchUser>
+////     );
+//// }
+
+goTo.marker();
+verify.completionListIsEmpty();
\ No newline at end of file
diff --git a/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts
new file mode 100644
index 0000000000000..d849948775e62
--- /dev/null
+++ b/tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts
@@ -0,0 +1,31 @@
+/// <reference path='fourslash.ts' />
+//@module: commonjs
+//@jsx: preserve
+
+// @Filename: 1.tsx
+//// declare module JSX {
+////     interface Element { }
+////     interface IntrinsicElements {
+////     }
+////     interface ElementAttributesProperty { props; }
+////     interface ElementChildrenAttribute { children; }
+//// }
+//// interface IUser {
+////     Name: string;
+//// }
+//// interface IFetchUserProps {
+////     children: (user: IUser) => any;
+//// }
+//// function FetchUser(props: IFetchUserProps) { return undefined; }
+//// function UserName() {
+////     return (
+////         <FetchUser>
+////             { user => (
+////                 <h1>{ user./**/ }</h1> 
+////             )}
+////         </FetchUser>
+////     );
+//// }
+
+goTo.marker();
+verify.completionListContains('Name');
\ No newline at end of file
diff --git a/tests/lib/react.d.ts b/tests/lib/react.d.ts
index b2b0783cf1533..0629cb956fc9b 100644
--- a/tests/lib/react.d.ts
+++ b/tests/lib/react.d.ts
@@ -2359,7 +2359,9 @@ declare namespace JSX {
     interface ElementClass extends React.Component<any, any> {
         render(): JSX.Element | null;
     }
-    interface ElementAttributesProperty { props: {}; }
+    interface ElementAttributesProperty { props; }
+
+    interface ElementChildrenAttribute { children; }
 
     interface IntrinsicAttributes extends React.Attributes { }