Understanding React.js state with typescript

Question

I am using typescript and react.js in an asp.net core application. I am getting an error TS property 'Persons' does not exist on type readonly. Can anyone tell me how to overcome this?

export default class HelloWorld extends React.Component<{}, {}> {
    constructor(props: any) {
        super(props);
        this.state = {
            persons: [
                        { name: 'Max', age: 28 },
                        { name: 'Max', age: 28 }
                    ]
        }
    }

    public render() {
        return (
            <div>
                <Person {this.state.persons[0].name} age="28"> My hobbies: racing</Person>
            </div>
        );
    }


import * as React from 'react';

const person = (props: any) => {
    return (
    <div>
            <p> Im {props.name} {props.age}</p>
            <p>{props.children}</p>
    </div>
    ) 

};

export default person;

Thanks

Does any of this actually relate to asp.net? I can't see how it does. You can probably remove that tag. — ADyson
– ADyson, Commented Mar 9, 2018 at 15:45
1. Is this a compiler error or a run-time error? 2. There is no Persons shown in this code, so either you are paraphrasing the error message or you are not showing the right code. — crashmstr
– crashmstr, Commented Mar 9, 2018 at 15:50
the person is this code import React from 'react'; const Person =(props)=>{ return <p>{props.name} and {props.age}</p> } export default Person; iam getting an complier error in the this.state.person[0].name — Great Khan 2016
– Great Khan 2016, Commented Mar 9, 2018 at 15:52

Brian C. · Accepted Answer · 2018-03-09 16:42:02Z

1

It looks like you need to mark the type of the array you are assigning to state as readonly.

import * as React from 'react'

interface HelloWorldI {
     persons: ReadonlyArray<PersonI>
}

interface PersonI {
     name: string,
     age: number
}

export default class HelloWorld extends React.Component<{}, HelloWorldI> {
constructor(props) {
    super(props)
    const p: ReadonlyArray<PersonI> = [
        { name: 'Max', age: 28 },
        { name: 'Max', age: 28 },
    ]

    this.state = {
        persons: p,
    }
}

public render() {
    return (
        <div>
          <Person name={this.state.persons[0].name}
                  age= {this.state.persons[0].age}>
          My hobbies: racing
          </Person>
        </div>
    )
  }
}

class Person extends React.Component<{name: string, age: number}, {}>     {
  render() {
    return( <p>{this.props.name} and {this.props.age}</p> )
  }
}

answered Mar 9, 2018 at 16:42

Brian C.

8,2005 gold badges41 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Great Khan 2016 Over a year ago

Thanks for the solution. Would you be able to recommend any tutorials for using typescript with react.

Brian C. Over a year ago

I've mainly used the one on the TS site: typescriptlang.org/docs/handbook/react-&-webpack.html

Great Khan 2016 Over a year ago

Thanks Brain. Last question i tried to add an event handler to the code to return the id of a person . Would you be able to tell me the correct way of doing it. I post the question here stackoverflow.com/questions/49235305/adding-event-handler/…

Collectives™ on Stack Overflow

Understanding React.js state with typescript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related