Skip to content

React stateless component + children : error Property 'children' is missing in type 'IntrinsicAttributes #8588

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Offirmo opened this issue May 13, 2016 · 6 comments
Labels
Duplicate An existing issue was already created

Comments

@Offirmo
Copy link

Offirmo commented May 13, 2016

[x] Many common issues and suggestions are addressed in the FAQ
https://github.com/Microsoft/TypeScript/wiki/FAQ
[x] Search for duplicates before logging new issues
https://github.com/Microsoft/TypeScript/issues?utf8=%E2%9C%93&q=is%3Aissue
[x] Questions are best asked and answered at Stack Overflow
http://stackoverflow.com/questions/tagged/typescript


-> asked on S/O here http://stackoverflow.com/questions/37189910/react-stateless-component-children-with-typescript-error-property-children no responses so far.

TypeScript Version:
1.8.2

Code

// presentational components
const MsgDisplay = ({msg}) => (
  <div>
    {msg} // will be more complicated later
  </div>)

const RowDisplay = ({data, children}) => (
  <tr>
    <td>...</td>
    <td>{ children }</td>
    <td>...</td>
  </tr>)

// container component
public render() {
    return (
      <RowDisplay data={this.props.xyz} >
        <MsgDisplay msg={someMsg} />
      </RowDisplay>
    )
  }

Expected behavior:

Should compile.

Actual behavior:

Complains that error TS2324: Property 'children' is missing in type 'IntrinsicAttributes & { data: any; children: any; }'.

Seems it can't see the children being passed in jsx notation.

@JabX
Copy link

JabX commented May 14, 2016

I also face this problem, but I go around it by making children optional. Not a good solution though.

@mhegazy mhegazy added the Bug A bug in TypeScript label May 17, 2016
@mhegazy mhegazy added this to the TypeScript 2.0 milestone May 17, 2016
@mhegazy mhegazy assigned sandersn and RyanCavanaugh and unassigned sandersn May 17, 2016
@yuit yuit assigned yuit and unassigned RyanCavanaugh Jun 3, 2016
@yuit
Copy link
Contributor

yuit commented Jun 6, 2016

I think this issue is similar to #7992 and #6471. We have decided to not make special treatment for children property.

EDIT: Talk with @RyanCavanaugh we should fix this behavior and TypeScript compiler should understand children property

@yuit yuit modified the milestones: TypeScript 2.1, TypeScript 2.0 Jun 6, 2016
@donaldpipowitch
Copy link
Contributor

Nice to see that this is planned for 2.1. It makes working with React really hard currently.

@Igorbek
Copy link
Contributor

Igorbek commented Mar 27, 2017

Does it progress any further? Is it going to be covered by #13618?
I just recently ran to this issue. It's pretty annoying when you components constructed as HOCs.

@mhegazy
Copy link
Contributor

mhegazy commented Mar 28, 2017

This looks like a duplicate of #13618, we would like to get that addressed in TS 2.3.

@mhegazy mhegazy added Duplicate An existing issue was already created and removed Committed The team has roadmapped this issue Domain: JSX/TSX Relates to the JSX parser and emitter Suggestion An idea for TypeScript labels Mar 28, 2017
@mhegazy mhegazy removed this from the Future milestone Mar 28, 2017
@mhegazy
Copy link
Contributor

mhegazy commented Mar 28, 2017

Closing in favor of #13618

@mhegazy mhegazy closed this as completed Mar 28, 2017
@microsoft microsoft locked and limited conversation to collaborators Jun 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Duplicate An existing issue was already created
Projects
None yet
Development

No branches or pull requests

8 participants