I have this class component where I'd like to fetch the response from server to an state array so I can pass further the elements to another component as props, so far I have this:

export default class MainApp extends Component {
state = {
    posts: [],
}

constructor(props){
    super(props);

    const request = new FetchRequest();
    request.setAmount(this.props.amount);
    request.setUserid(this.props.token);
    request.setSeenpostsList(this.props.seenPosts);
    
    var stream = client.fetchPosts(request, {});
    stream.on('data', function(response) {
        this.setState({
            posts: [...this.state.posts, response.array]
        })
    });
}

render(){
    return(
    <div className="main-app">
        <Navbar />
        <Postbox token = {this.props.token}/>
        {this.state.posts.map(element => 
            <Postcard username = {element[0]}/>
         )}
    </div>
    )
}

With this code I get TypeError: Cannot read properties of undefined (reading 'posts').

What is the correct way to do it?