React Redux TS - Problem with components props received from Application State #352

New Issue

fergalmoran · 2025-08-09T17:15:57Z

fergalmoran commented

2025-08-09 17:15:57 +00:00

Originally created by @rmateusz on 10/20/2017

I have a problem with getting the data from ApplicationState in new component (Header), which is set in Layout component:

export class Layout extends React.Component<{}, {}> { public render() { return <div> <div className='container-fluid'> <div className='row'> <div className='col-sm-3'> <NavMenu /> </div> <div className='col-sm-9'> <div className=""> <Header /> </div> { this.props.children } </div> </div> </div> </div>; } }

Header component tries to get "count" value from state:

import * as React from "react";
import { NavLink, Link } from "react-router-dom";
import { connect } from 'react-redux';
import { ApplicationState } from '../store';

type HeaderProps = {
count: number
};

class Header extends React.Component<HeaderProps, any> {
constructor(props : HeaderProps) {
super(props);
}

public render() {
    return (
        <header className="header">
            <div>
                Hello
                {(this.props.count > 2) ? " Wazzzup" : null }
            </div>
        </header>
    );
}

}

export default connect(
(state: ApplicationState) => {
return {
count: state.counter.count
}}
,{}
)(Header) as typeof Header;

With props type set to "HeaderProps", I get error:

When I changed HeaderProps to any, it works:

Working result:

*Originally created by @rmateusz on 10/20/2017* I have a problem with getting the data from ApplicationState in new component (Header), which is set in Layout component: ` export class Layout extends React.Component<{}, {}> { public render() { return <div> <div className='container-fluid'> <div className='row'> <div className='col-sm-3'> <NavMenu /> </div> <div className='col-sm-9'> <div className=""> <Header /> </div> { this.props.children } </div> </div> </div> </div>; } } ` ![lay1](https://user-images.githubusercontent.com/10436373/31825289-feb613e6-b5b1-11e7-9965-a9bf6b58c76b.PNG) Header component tries to get "count" value from state: import * as React from "react"; import { NavLink, Link } from "react-router-dom"; import { connect } from 'react-redux'; import { ApplicationState } from '../store'; type HeaderProps = { count: number }; class Header extends React.Component<HeaderProps, any> { constructor(props : HeaderProps) { super(props); } public render() { return ( <header className="header"> <div> Hello {(this.props.count > 2) ? " Wazzzup" : null } </div> </header> ); } } export default connect( (state: ApplicationState) => { return { count: state.counter.count }} ,{} )(Header) as typeof Header; ![header2](https://user-images.githubusercontent.com/10436373/31825570-f589d310-b5b2-11e7-89f4-811c2f9f8d14.PNG) With props type set to "HeaderProps", I get error: ![1](https://user-images.githubusercontent.com/10436373/31825236-d58c977e-b5b1-11e7-9dbd-794d6e91c355.PNG) When I changed HeaderProps to any, it works: ![any1](https://user-images.githubusercontent.com/10436373/31825601-15e4a234-b5b3-11e7-8d78-7f80fa73430a.PNG) Working result: ![result](https://user-images.githubusercontent.com/10436373/31825653-333e2c88-b5b3-11e7-96f8-f33362f56505.PNG)

fergalmoran closed this issue

2025-08-09 17:15:57 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#352