setting default value for react class component state in typescript

Question

this is the state of the component:

class Feed extends Component<FeedProps, FeedState> {
  constructor(props) {
    super(props);
    this.state = {
      isEditing: false,
      posts: [],
      totalPosts: 0,
      editPost: null,
      status: "",
      postPage: 1,
      postsLoading: true,
      editLoading: false,
    };
  }
      
  return (jsx code here)}

this is the interface that I wrote:

interface FeedState {
  isEditing: boolean;
  posts: typeof Post[];
  totalPosts: 0;
  editPost: null | boolean;
  status: string;
  postPage: 1;
  postsLoading: boolean;
  editLoading: boolean;
}

i need to set default value for totalPosts and postpage but I could not figure out. Also

 posts: typeof Post[]; // Post is a functional component and i try to say posts is gonna be array of Post instances. is it correct or shall I convert Post to class component.

I am getting these errors:

      Types of property 'totalPosts' are incompatible.
      Type 'number' is not assignable to type '0'.
      Type '{ posts: React.FC<PostProps>[]; totalPosts: number; }' is not assignable to type 'FeedState | Pick<FeedState, "posts" | "totalPosts">'.

I am in the middle of converting my js project to tsx and i cannot run the code yet.

I'm not sure what you are asking. Are you seeing an error? What do you mean "I could not figure it out?" — jered
– jered, Commented Nov 11, 2020 at 3:30
Hi @jered . yes Iam getting errors and i updated the question. sorry for not being clear. I have lost myself inside react-typescript — Yilmaz
– Yilmaz, Commented Nov 11, 2020 at 3:35

jered · Accepted Answer · 2020-11-11 05:03:00Z

totalPosts and postPage should be of type number, not the literal values of 0 and 1. There is no way to set a "default value" directly on an interface, you have to do it in the initialization of the class itself (which it looks like you are already doing).

As for Post[], it would be an anti-pattern in React to keep instances of React components directly in state. Instead, you should keep the data that those instances represent, the model, in state, and render components based off of that.

So instead of doing this:

function Post({ title }) {
  // etc.
}

// bad, very bad
this.setState({posts: [<Post title="Hello" />]});

// render function...
render () {
  return <div>{this.state.posts}</div>
}

You should do this:

// much better
this.setState({posts: [{ title: "Hello" }] });

// render function...
render () {
  return <div>{this.state.posts.map(ea => <Post {...ea} />)}</div>
}

Then in your interface, the type of posts would be something like Array<{title: string}>, or if you want to be fancy, Array<Partial<React.ComponentProps<typeof Post>>>

React components should turn state and data into something to render, NOT by keeping instances of components in variables or state itself, but instead by transforming state into a rendered component.

Collectives™ on Stack Overflow

setting default value for react class component state in typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related