JSX over the Wire

Suppose you have an API route that returns some data as JSON: app . get ( ' /api/likes/:postId ' , async ( req , res ) => { const postId = req . params . postId ; const [ post , friendLikes ] = await Promise . all ([ getPost ( postId ), getFriendLikes ( postId , { limit : 2 }), ]); const json = { totalLikeCount : post . totalLikeCount , isLikedByUser : post . isLikedByUser , friendLikes : friendLikes , }; res . json ( json ); }); You also have a React component that needs that data: function LikeButton ( { totalLikeCount , isLikedByUser , friendLikes } ) { let buttonText = ' Like ' ; if ( totalLikeCount > 0 ) { // e.g. "Liked by You, Alice, and 13 others" buttonText = formatLikeText ( totalLikeCount , isLikedByUser , friendLikes ); } return ( < button className={ isLikedByUser ? ' liked ' : '' }> { buttonText } ); } How do you get that data into that component? You could pass it from a parent component using some data fetching library: function PostLikeButton ( { post ... Read full article.