Adding component to React Redux ASP.NET Core React template

[scottaddie]

Moved from https://github.com/aspnet/Docs/issues/8471. Originally opened by @KevinBurton.

I am trying to add components to my simple test project and I am getting an error (squiggly red line) that indicates:

[ts] Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TitleDescription> & Readonly<{ children?: ReactNod...'. Type '{}' is not assignable to type 'Readonly<TitleDescriptionProps>'. Property 'itemId' is missing in type '{}'.

I am having a hard time tracing where the type {} is defined.

Thank you.

Kevin

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 7264db1b-55ec-e419-d2c4-bd4fe64922a2
• Version Independent ID: 720995d2-006a-3573-4868-d253c8a2acc7
• Content: Use the React-with-Redux project template with ASP.NET Core
• Content Source: aspnetcore/client-side/spa/react-with-redux.md
• Product: aspnet-core
• GitHub Login: @SteveSandersonMS
• Microsoft Alias: scaddie

[mkArtakMSFT]

Hi @KevinBurton. It looks like this is a question about how to use ASP.NET Core. While we do our best to look through all the issues filed here, to get a faster response we suggest posting your questions to StackOverflow using the asp.net-core-mvc tag.

[mkArtakMSFT]

@KevinBurton, did you get your question answered on StackOverflow? Should this issue be closed or do you still need help from us?

[KevinBurton]

Not yet thank you.

On Fri, Oct 5, 2018 at 11:12 AM Artak notifications@github.com wrote:

@KevinBurton https://github.com/KevinBurton, did you get your question answered on StackOverflow? Should this issue be closed or do you still need help from us?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/Templating/issues/750#issuecomment-427419160, or mute the thread https://github.com/notifications/unsubscribe-auth/AChWblusOusiB28RqswPbiAURS7oAUDpks5uh4T7gaJpZM4W28Q3 .

[mkArtakMSFT]

It would be useful to have a small repro project.

[KevinBurton]

The repo project would be the project that is created from this template and some explanation on how to add a component to the project. Basically annotated .ts and .tsx files.

[mkArtakMSFT]

To help you out we'll need the failing code. The template already contains components, which work just fine.

[KevinBurton]

I need the steps needed to add a component.

On Wed, Oct 10, 2018 at 12:27 PM Artak notifications@github.com wrote:

To help you out we'll need the failing code. The template already contains components, which work just fine.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/Templating/issues/750#issuecomment-428659462, or mute the thread https://github.com/notifications/unsubscribe-auth/AChWbnqhn_pSXWA6UO6qWY2YJ050t715ks5uji3-gaJpZM4W28Q3 .

[tpetrina]

It is rather simple. In a fresh project, add a new file named MyComponent.js to /ClientApp/src/components with the following content:

import React from "react";
import { connect } from "react-redux";

const MyComponent = () => (
  <div>
    <h1>My component</h1>
  </div>
);

export default connect()(MyComponent);

And in the Home.js file add import MyComponent from './MyComponent'; as the second line. After </h1> add <MyComponent /> and it should work.

If you have something nontrivial, we need your code to see what you did differently. Especially since your error is TypeScript which is not supported in this template.

[KevinBurton]

Yet all the components in the template are defined with .tsx and .ts. Getting all the types right seems to be where the bulk of the work is. Finding the right combination for the component (tsx), the state (ts) and the dispatch actions (ts) has some how eluded me so far on all but the simplest components. A good annotated example of an added component that “reacts” to state changes, accesses state props, invokes /dispatches actions that change the state, and some explanations on what is needed to properly define an action. That would be really helpful. Thank you.

On Thu, Oct 11, 2018 at 4:11 AM Toni Petrina notifications@github.com wrote:

It is rather simple. In a fresh project, add a new file named MyComponent.js to /ClientApp/src/components with the following content:

import React from "react";import { connect } from "react-redux"; const MyComponent = () => (

My component

); export default connect()(MyComponent);

And in the Home.js file add import MyComponent from './MyComponent'; as the second line. After add and it should work.

If you have something nontrivial, we need your code to see what you did differently. Especially since your error is TypeScript which is not supported in this template.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/Templating/issues/750#issuecomment-428880585, or mute the thread https://github.com/notifications/unsubscribe-auth/AChWbtOkkreDmCsab75BzJEhybs4Bs2Rks5ujwslgaJpZM4W28Q3 .

[SteveSandersonMS]

@KevinBurton It sounds like you're using the older (pre-ASP.NET Core 2.1) templates. The latest React+Redux template is closer to the original create-react-app (CRA) output and hence is .js/.jsx only. This is discussed elsewhere on the issue tracker here if you want to search to find more discussion about it.

If you want to continue using the older template with .tsx, then it already contains an example of a component that does all the things you mention: the FetchData component. I'm sure you've seen that so I'm not clear on what other example you'd be looking for.

[tpetrina]

@KevinBurton as @SteveSandersonMS says you are using an older version of templates. I can help you in that regard, but that template is considered archived and not to be used. If you want to use TypeScript with CRA and ASP.NET Core, you have to jump through some hoops.

[KevinBurton]

Thank you. I was just using the template that was available with VS 2017. I wasn’t aware that it was “old”. How do I get the new version?

On Fri, Oct 12, 2018 at 5:46 AM Toni Petrina notifications@github.com wrote:

@KevinBurton https://github.com/KevinBurton as @SteveSandersonMS https://github.com/SteveSandersonMS says you are using an older version of templates. I can help you in that regard, but that template is considered archived and not to be used. If you want to use TypeScript with CRA and ASP.NET Core, you have to jump through some hoops.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/Templating/issues/750#issuecomment-429284987, or mute the thread https://github.com/notifications/unsubscribe-auth/AChWbmuesiDI2Mkqua3_V-1Eb7RY9eVyks5ukHMFgaJpZM4W28Q3 .

[tpetrina]

Which version of .NET Core are you running? Can you run in console:

dotnet --version

And also dotnet new reactredux -o C:\temp\rrtest to see what is actually created?

[KevinBurton]

PS C:\Users\Kevin> dotnet --version 2.1.200 PS C:\Users\Kevin>

This also creates .tsx components with .ts store and state (uses TypeScript)

On Fri, Oct 12, 2018 at 9:19 AM Toni Petrina notifications@github.com wrote:

Which version of .NET Core are you running? Can you run in console:

dotnet --version

And also dotnet new reactredux -o C:\temp\rrtest to see what is actually created?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/Templating/issues/750#issuecomment-429342026, or mute the thread https://github.com/notifications/unsubscribe-auth/AChWbhreqgSX8qKF3JzJ5HP822ZMfCm9ks5ukKT2gaJpZM4W28Q3 .

[mkArtakMSFT]

@KevinBurton, you should be on at least 2.1.300 to get the new templates. Just update to the latest SDK (2.1.403).