React Promise get returned data inside of JSX code from .then()?

Hi! I simply have a Comment component and I can get the data that I am looking for using a Promise inside of .then() but if I want to display the data in an JSX element down at the render/return things, I do not know how to do.

I tried putting the return statement inside of the .then() but I guess that is a very incorrect approach. I just simply want to display the data of the comment in a div element so that the user can see that.

So instead of: `text={this.props.text}` it shold be possible to do: `text={this.comment}` or something
` render() {
FirebaseFunc.getComment(this.props.userId, this.props.storyId, ‘[id of comment here]’).then((comment) => {
console.log(‘COMMENT PROMISE’);
console.log(comment); // **<– I want to get this data into the “real comment”**
});

return (
<Comment.Group>
<Comment>
<Comment.Content>
<Comment.Author as=’a’>Du</Comment.Author>
<Comment.Metadata>
<div>12:00 Idag</div>
</Comment.Metadata>
<Comment.Text >
<CommentEdit text={this.props.text} />
</Comment.Text>
<Comment.Actions>
<Comment.Action>Kommentera</Comment.Action>
<Comment.Action onClick={() => CommentAction.edit(this.props.text)}>Redigera</Comment.Action>
</Comment.Actions>
</Comment.Content>
</Comment>
</Comment.Group>

)
}`

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-03-18/1584559361-271639-comment.jpeg]

Also in #HTML _↴