Updating data in a react component with interface

Question

I am creating a component in React using tsx that uses an interface as its props. Like shown below:

export interface ISummaryStats {
    firstName: string,
    lastName: string,
}

export class TestComponent extends React.Component<ISummaryStats> {
    refreshData = async () => {
        const data = await this.getData();
        this.props.firstName = data;
    };
    getData = async () => {
        //Call the API to get the data
        //! API call goes here
        return 'Jimmy';
    }
    public render(): React.ReactNode {
        return (
            <div>
                <h1>
                    {this.props.firstName}
                </h1>
                <h2>
                    {this.props.lastName}
                </h2>
                <button onClick={this.refreshData}>Click me</button>
            </div>
        );
    }
}

What I am trying to do is create a button that calls my API to see if there has been any changes to the data. If so, I want to update the display. However, with the current code I get the following error: Cannot assign to 'firstName' because it is a read-only property.

I am not that experience with interfaces, should I be storing the props values in an object when the component loads so that I can modify that instead of trying to modify the props or is there a different method?

Chris Hamilton · Accepted Answer · 2022-08-24 02:20:38Z

1

In React, properties are read only. Use state and setState to allow changing values, as outlined in the docs: https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

setState triggers a rerender of the component, updating the UI. That's the reason for this pattern.

When using typescript, the first generic type is the type of properties, the second is the type of state.

export interface ISummaryStats {
  firstName: string;
  lastName: string;
}

export class TestComponent extends React.Component<
  ISummaryStats, // type of props
  ISummaryStats // type of state
> {
  constructor(props) {
    super(props);
    this.state = props;
  }
  refreshData = async () => {
    const data = await this.getData();
    this.setState({ firstName: data });
  };
  getData = async () => {
    return 'Jimmy';
  };
  public render(): React.ReactNode {
    return (
      <div>
        <h1>{this.state.firstName}</h1>
        <h2>{this.state.lastName}</h2>
        <button onClick={this.refreshData}>Click me</button>
      </div>
    );
  }
}

Stackblitz: https://stackblitz.com/edit/react-ts-8htues?file=App.tsx

edited Aug 24, 2022 at 2:20

answered Aug 24, 2022 at 2:13

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

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

1 Comment

de19 Over a year ago

Thank you for the response, that is interesting to know. I appreciate the help :)

Collectives™ on Stack Overflow

Updating data in a react component with interface

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related