Assemble the Word Counter
While the other components map to a single user interface element, the WordCounter assembles the other components and computes their props. Since we can determine the word count and progress from the text and the target word count, it will take just two props: a text and a target word count. It will calculate the word count and progress and pass these values as props to Counter and ProgressBar.
We need to write some code to count the words in a string. When you’ve got code that has nothing to do with rendering a user interface, store it in a separate function. That way, you don’t need to recreate the whole React element just to test the output of the function, and you can rearrange your components more easily as the functionality is not tied to a specific component. In index.js, define a new function named countWords that counts the words in a string:
| | function countWords(text) { |
| | return text ? text.match(/w+/g).length : 0; |
| | } |
The countWords function accepts an argument with the text to count. We return 0 if text is null or undefined. Otherwise, we build an array of the words, separated by whitespace, and use its length as the word count. null and undefined behave as false in a boolean expression, and all other strings as true, so we use a ternary expression to distinguish the two cases. To count the words, use the match function that’s defined on all strings. match takes a regular expression and returns an array containing the matching substring. To match a whitespace-separated word, use the /w+/g regular expression. w matches a non-space character, and the + sign means that every sequence of one or more characters counts as a single match. g indicates to return the substrings that match the pattern in the whole string. Call match and pass it the regular expression, then retrieve the length property of the returned array.
Once you’ve defined the countWords function, create the WordCounter component. Define a new function named WordCounter that takes an object with a text and targetWordCount properties. Pass text to countWords to calculate the word count for Counter. From the word count, you can then calculate the progress for ProgressBar by dividing the word count by the target word count to obtain the progress.
| | function WordCounter({ text, targetWordCount }) { |
| | const wordCount = countWords(text); |
| | const progress = wordCount / targetWordCount; |
| | } |
Now that you’ve calculated the props for Counter and ProgressBar, we can display the complete interface. At the end of the WordCounter function, combine Editor, Counter, and ProgressBar into a form, and pass the appropriate props to each element:
| | const progress = wordCount / targetWordCount; |
| » | return ( |
| » | <form className="measure pa4 sans-serif"> |
| » | <Editor text={text} /> |
| » | <div className="flex mt3"> |
| » | <Counter count={wordCount} /> |
| » | <ProgressBar completion={progress} /> |
| » | </div> |
| » | </form> |
| » | ); |
Place the child elements inside a <form> element. Pass text as the Editor text prop, wordCount as the Counter prop, and progress as the ProgressBar completion prop. Use braces instead of quotation marks after the equal sign; otherwise, React will interpret the props as string literals.
Let’s render the word counter on the page. At the end of index.js, call ReactDOM.render with the WordCounter component:
| | ReactDOM.render( |
| | <WordCounter text="Count the words in here." targetWordCount={10} />, |
| | document.getElementById('app') |
| | ); |
Pass a string as the text prop and a number as the targetWordCount prop. Since the text prop is a string, you can enclose it in quotation marks. Render the word counter in the <div> with the app id.
Include index.js in index.html after the React links and open index.html in the browser. You’ll see the word counter displaying the text you set as the text prop and the matching count and progress. If you change the text and targetWordCount props and reload the page, the word count and the progress bar will update accordingly.
Most components should define the markup and style to display the data. They work a little bit like templates. Other components sit at the top of the component hierarchy, and calculate the data their children need.