---
title: "Counting your children"
publication: "React Status"
issue: 251
published_at: "2021-08-11"
canonical_url: "https://react.statuscode.com/issues/251"
---

Plus all the usual code and tool releases. |        

#​251 — August 11, 2021 

[Read on the Web](https://react.statuscode.com/issues/251)   React Status ⚛️ _Your weekly React news digest, every Wednesday_   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ms7r0xlokgfblerbvmdb.jpg)](https://www.smashingmagazine.com/2021/08/react-children-iteration-methods/)  

[React Children and Iteration Methods](https://www.smashingmagazine.com/2021/08/react-children-iteration-methods/) — You might think you’ve learnt everything about iterating over React’s `.children` prop. However, this detailed review of the `.toArray` method may reveal a few things of which you were not aware. 

Arihant Verma   

▶[Create a Dashboard App Based on a Figma Design](https://www.youtube.com/watch?v=CHtMGW5HIt4) — [Figma](https://www.figma.com/) is an increasingly popular tool for designing apps of all kinds, so it's great to see another instalment in this informal series walking through the concrete steps of turning an idea into a design, and then into a React-powered reality. 

Mitchel Techbase   [![\](https://copm.s3.amazonaws.com/16f1c33d.jpg)](https://frontendmasters.com/courses/typescript-v3/?utm_source=reactstatus&utm_medium=email&utm_campaign=typescript) 

[Learn the Fundamentals of TypeScript](https://frontendmasters.com/courses/typescript-v3/?utm_source=reactstatus&utm_medium=email&utm_campaign=typescript) — Use TypeScript to add strong typing to large JavaScript apps helps reduce bugs and keeps code performant and maintainable. This course covers all you need to know including how to migrate your codebase to TypeScript and improve productivity while building large-scale apps with ease. 

Frontend Masters sponsor   

[How to Build Force Directed Graphs with React and D3 v7](https://reactfordataviz.com/articles/force-directed-graphs-with-react-and-d3v7/) — A step-by-step build from no movement to the ‘full bells and whistles’ complete with code sandboxes to play with. 

Swizec Teller   

[A Visual Guide to React Rendering: Props](https://alexsidorenko.com/blog/react-render-props/) — The second of three parts of this author’s series, each part of which employs a series of simple GIF animations to clearly illustrate the rendering behaviour of React. It’s really helpful to understand what is actually going on. 

Alex Sidorenko   

[Why You Should Stop Using The “Container/Presentational” Pattern in Redux (.. Or Not!)](https://medium.com/nmc-techblog/why-you-should-stop-using-the-container-presentational-pattern-in-redux-29b112406128) — A dramatic, concrete assertion right in the title almost invites differing points of view (_maybe that’s the author’s intent?_) and this article is no exception. After reading, you will want to review the ensuing [discussion on Reddit](https://www.reddit.com/r/reactjs/comments/ox6cwk/why_you_should_stop_using_the/h7kg757/) where Redux expert Mark Erikson chipped in. 

Matan Borenkraout    

Jobs  

[Frontend Engineer (React, New York)](https://angel.co/company/dovetale/jobs/1475158-frontend-engineer) — Dovetale helps Shopify merchants like KontrolFreek and Italic grow their creator community. Built in NYC and backed by Uber founders. 
Dovetale   

[Senior Frontend Engineer - React (Remote)](https://jobs.lever.co/kraken/a5e33e54-1da0-4c65-9fc8-04031125db10) — With over 7 million clients, Kraken is one of the world's largest, most successful bitcoin exchanges. 
Kraken   

[Find React Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. 
Hired      

[How One Conditional Can Entangle Your React App](https://t.co/OVKctG1dQi?amp=1) — A cautionary exploration of how a lack of intentional composition can impact your React project. 

Jason Lee Hodges   

[Using Websockets with React with No Library Needed](https://dev.to/itays123/using-websockets-with-react-js-the-right-way-no-library-needed-15d0) 
Itay Schechner   

[Tagged Template Literals—The Magic Behind Styled Components](https://dev.to/dekel/tagged-template-literals-the-magic-behind-styled-components-2f2c) 
Dekel Braunstein   

[Catching Errors in React with Error Boundaries](https://blog.openreplay.com/catching-errors-in-react-with-error-boundaries) 
Kristofer Selbekk  

🛠 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/daqsgmns4jkvy7j6rzyz.jpg)](https://charts.ant.design/)  

[Ant Design Charts](https://charts.ant.design/) — Yes, yet another React chart library with a rich assortment of [presentation styles](https://charts.ant.design/guide/), but this one’s from the [Alibaba](https://www.alibaba.com)-affiliated [Ant Design](https://ant.design). 

Ant Design Team   

[Rooks: 63 Custom React Hooks](https://github.com/imbhargav5/rooks) — It’s almost inevitable the hook for which you’re looking, or something close to it, is in here somewhere. Now well into its fifth major release. 

Bhargav Ponnapalli   

[A Guide to Building Form Components Using the React‑Hook‑Form Library](https://retool.com/blog/how-to-build-a-react-form-component/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) 

Retool sponsor   

[Base Web React Components v10.0](https://github.com/uber/baseweb) — [Base](https://medium.com/uber-design/uber-design-platform-1ebff86c89e7) is [Uber](https://www.uber.com)’s in-house design system, and Base Web is the mature, React implementation of it. 

Uber Open Source   

[Tailwind Nextjs Starter Blog Template](https://github.com/timlrx/tailwind-nextjs-starter-blog) — About to roll your own, custom blogging platform using Tailwind and Next.js? Stop! This [live demo](https://tailwind-nextjs-starter-blog.vercel.app/) shows this one to be clean, complete and visually pleasing. 

Timothy Lin   

[react-infinitegrid](https://github.com/naver/egjs-infinitegrid/tree/master/packages/react-infinitegrid) — A key element in keeping websites sticky is the much-loved (or hated?) infinite grid. You will run out of patience before it does. From the well-respected [Korean search engine](https://www.naver.com), NAVER. 

Naver    

## ⚡️ Quick Bits: 

- [Chakra-UI AutoComplete](https://github.com/koolamusic/chakra-ui-autocomplete) — A [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/)-compliant autocomplete component.
- [react-native-actions-sheet](https://github.com/ammarahm-ed/react-native-actions-sheet) — A React Native version of Apple's [ActionSheet](https://developer.apple.com/documentation/swiftui/actionsheet), which requires users to make a choice between two or more options.
- [React Chat Widget](https://github.com/Wolox/react-chat-widget) — Chat pop-ups are everywhere. Here's one for your app.
- [LeafView](https://github.com/sprout2000/leafview) — "An image viewer for minimalists."
- [react-dart](https://github.com/Workiva/react-dart) — [Dart](https://dart.dev) bindings for React.          

This issue was curated by Terence C. Gannon and edited by the Cooperpress team. 

A **[Cooperpress](https://cooperpress.com/)** publication. 

[Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom