The latest articles on DEV Community by David Clark (@daviddoes). https://dev.to/daviddoes https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F77255%2F4fe2af1f-4ee8-4d7f-9e54-6aac37cc3a0b.jpg https://dev.to/daviddoes en David Clark Thu, 25 Jul 2019 01:14:46 +0000 https://dev.to/daviddoes/creating-a-dynamic-select-menu-with-react-52fm https://dev.to/daviddoes/creating-a-dynamic-select-menu-with-react-52fm <p><em><a href="https://medium.com/l2code/creating-a-dynamic-select-menu-with-react-701950fbedd6">originally posted to medium</a></em></p> <p>I must say — this was a somewhat difficult feature for me to figure out how to implement. I looked at libraries such as <a href="https://react-select.com/home">react-select</a> and other’s implementations of similar features, but just couldn’t find what I was looking for. Stepping out of everyone’s comfort zone of using someone else’s hard work, I greased up my elbows and set to work.</p> <p>React is still new to me, along with everything that is software development. Therefore, it takes a bit more mental computation to understand exactly what I’m trying to accomplish.</p> <p>In this case, I needed to understand how to get previously-stored values into a element in a form. The idea is that the user is utilizing this form to record meditation sessions — or what I refer to as <em>mindful moments</em> — and in this form the user records the location where they had that mindful moment. Chances are they’re going to meditate in the same location more than once, so we need to make it so that the user can either use an already-existing location, or create a new one.</p> <h3> Code Walk-through </h3> <p>Let’s see how to do this…<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>// LocationSelect component import React from 'react'; import { connect } from 'react-redux'; import { getMoments } from '../actions/moments'; </code></pre></div> <p>Of course, we need to import React and connect, and also the action to get our list of moments — a call to our API — which contains the location that we need for our later on.</p> <p>Let’s initialize our component’s state:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>class LocationSelect extends React.Component { constructor(props){ super(props); this.state = { location: '' }; } </code></pre></div> <p>So we’re telling our component to store a location key in its state, but not yet giving it a value. We just giving that value a place to go later on.</p> <p>Let’s get our moments object from our API:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> componentDidMount(){ if (this.props.authToken){ getMoments(this.props.authToken); } } </code></pre></div> <p><em>If</em> our props contains the authToken , then run the getMoments action with that authToken. We want this to happen once this component mounts.</p> <p>Inside our render(), we want to sort our select menu’s options to make it more user-friendly. To do this, we need to first get all of our previously-entered data, store it in a new array, then sort that array.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>render() { let momentsList = []; this.props.moments.forEach(({ id, location }) =&gt; momentsList.push({ id, location })); let uniqueSet = [...new Set(momentsList.map(moment =&gt; moment.location))]; </code></pre></div> <p>So we create our new array, momentsList. Since they’re passed as props, we need to grab them from there, and run a forEach, grabbing the id and the location from <em>each</em> iteration (in this case, each moment). Then, we’re pushing id and location into our new array from each moment we iterate over. We only want the id and location, not any other information that might be stored in that object.</p> <p>We then need to create a new Set, so that we can store data of any type. We’re saying, <em>Create a new array called uniqueSet, which will be a new Set created from a map() over our previous array, grabbing the location</em>.</p> <p>*I know this is rather messy — I’d love to know of a more succinct way to do this if possible!</p> <p>Next, let’s sort that new array alphabetically:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>let sortedList = uniqueSet.sort() .map((location, index) =&gt; &lt;option key={index}&gt;{location}&lt;/option&gt;); </code></pre></div> <p>The default behavior of <code>sort()</code> is to sort alphabetically.</p> <p>Our map function is taking the location and index of each of those now-sorted items and putting them into an array for our to use later. Notice we’re using the index as our key for React, and location as our text to display.</p> <p>Inside our return statement is where we’re going to see all of this come to fruition on the user-side.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>return ( &lt;div className="dropdown"&gt; &lt;label htmlFor="location"&gt;Location&lt;/label&gt; &lt;input required className="form-input" type="text" name="location" placeholder="create or choose" value={this.props.location} onChange={event =&gt; this.handleTextFieldChange(event, 'location')} maxLength="20" autoComplete="off" /&gt; &lt;select onChange={event =&gt; this.handleTextFieldChange(event, 'location')}&gt; {sortedList} &lt;/select&gt; &lt;/div&gt; ); </code></pre></div> <p>Here you can see that we are rendering to the page an and our . Our input is the text field used to create a new location, while our select is where we’re rendering all previously-enter location items.</p> <p>Our select is receiving our sortedList array to be used as s — remember when we wrote that above?</p> <p>If we scroll up in our imaginative document here, we need to write our onChange handler, handleTextFieldChange.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>handleTextFieldChange(event) { let location = event.target.value; let text = location // capitalize first letter .toLowerCase() .split(' ') .map(s =&gt; s.charAt(0).toUpperCase() + s.substr(1)) .join(' '); this.props.setLocation(text, 'location'); } </code></pre></div> <p>event.target.value is either our input or our select. If we type into our input field, or if we select an option from the menu. We’re also manipulating all text that gets put into that input field; we’re capitalizing the first character. This helps to keep things looking tidy. Users might feel like capitalizing one day, or using all lowercase the next. This way, our stored data is uniform. You can read more about this in <a href="https://dev.to/daviddoes/react-how-to-manipulate-input-values-before-storing-to-state-4n8d">my previous post</a>.</p> <p>Then we finish off our component:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>const mapStateToProps = state =&gt; ({ moments: state.moments.moments, authToken: state.auth.authToken }); </code></pre></div> <div class="highlight"><pre class="highlight plaintext"><code>export default connect(mapStateToProps)(LocationSelect); </code></pre></div> <p>and render it in our parent component after importing it.</p> <p>I understand this is a rough how-to. As one with not a ton of experience with React and JavaScript, and having no one in-person to bounce ideas off of, I was left with reading docs and seeing what others have done. I never did find something doing this same thing, so I had to utilize what I could piece together. For instance, Set is very new to me, and I honestly don’t think I used it in the correct manner. That said, it’s what worked for what I needed.</p> <p>I do hope this has helped someone, and I very much welcome any and all input. Below, you can find the component in its entirety:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>import React from 'react'; import { connect } from 'react-redux'; import { getMoments } from '../actions/moments'; class LocationSelect extends React.Component { constructor(props) { super(props); this.state = { location: '' }; } componentDidMount() { if (this.props.authToken) { getMoments(this.props.authToken); } } handleTextFieldChange(event) { let location = event.target.value; let text = location // capitalize first letter .toLowerCase() .split(' ') .map(s =&gt; s.charAt(0).toUpperCase() + s.substr(1)) .join(' '); this.props.setLocation(text, 'location'); } render() { let momentsList = []; this.props.moments.forEach(({ id, location }) =&gt; momentsList.push({ id, location })); let uniqueSet = [...new Set(momentsList.map(moment =&gt; moment.location))]; // sort list alpha, map to render let sortedList = uniqueSet .sort((a, b) =&gt; { if (a &lt; b) return -1; else if (a &gt; b) return 1; return 0; }) .map((location, index) =&gt; &lt;option key={index}&gt;{location}&lt;/option&gt;); // store locations to state return ( &lt;div className="dropdown"&gt; &lt;label htmlFor="location"&gt;Location&lt;/label&gt; &lt;input required className="form-input" type="text" name="location" placeholder="create or choose" value={this.props.location} onChange={event =&gt; this.handleTextFieldChange(event, 'location')} maxLength="20" autoComplete="off" /&gt; &lt;select onChange={event =&gt; this.handleTextFieldChange(event, 'location')}&gt; {sortedList} &lt;/select&gt; &lt;/div&gt; ); } } const mapStateToProps = state =&gt; ({ moments: state.moments.moments, authToken: state.auth.authToken }); export default connect(mapStateToProps)(LocationSelect); </code></pre></div> <p><strong>Changelog</strong><br> July 25, 2019</p> <ul> <li>fix formatting errors carried over from Medium</li> <li>update <code>.sort()</code> code block</li> </ul> react javascript beginners guide David Clark Thu, 25 Jul 2019 01:14:29 +0000 https://dev.to/daviddoes/how-does-this-alphabetical-sorting-function-work-5bg4 https://dev.to/daviddoes/how-does-this-alphabetical-sorting-function-work-5bg4 <p>I'm pretty sure I wrote this function based off of someone else's that I saw. Trouble is, I'm looking back through some code, and I don't fully understand how it works. </p> <p>What I have is a <code>Set</code> that I'm sorting alphabetically. That Set is named, aptly, <code>uniqueSet</code>. Here's the code:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>let sortedList = uniqueSet .sort((a, b) =&gt; { if (a &lt; b) return -1; else if (a &gt; b) return 1; return 0; }) </code></pre></div> beginners help explainlikeimfive David Clark Thu, 20 Jun 2019 00:01:11 +0000 https://dev.to/daviddoes/react-how-to-manipulate-input-values-before-storing-to-state-4n8d https://dev.to/daviddoes/react-how-to-manipulate-input-values-before-storing-to-state-4n8d <p>While working on a project, I decided it was important to do some manipulating of input values before storing it to state. Namely, capitalizing the first letter of each word the user types into that field. </p> <p>I wasn't sure how to do this in JavaScript, and I wasn't 100% sure how to implement that capitalization behavior into my React component before it was stored to state (this might seem obvious to most, but I've spent a few weeks away from this project). </p> <p>After all was said and done, I realized there wasn't a lot out there on this that I'd seen, so I'm sharing it here with you all. </p> <h2> Where Do We Do It? </h2> <p>If we look at our components, we probably have one for each form, or even each field. Inside there, we have what are called <code>handlers</code>. These little buddies take our inputs and do something with them. Chances are, storing it to our state. </p> <p>This handler might look something like this:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> handleInput(event, key) { this.setState({ [key]: event.target.value }); } </code></pre></div> <p>What this does, is stores the <code>value</code> of the input field (so, whatever the user types or selects) and plunks it into this component's state object, at the <code>key</code> that is passed from our <code>onChange</code> event. </p> <p>Our input with <code>onChange</code> might look like this (usually more going on here, but let's keep it simple for this):<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> &lt;input required type="text" onChange={event =&gt; this.handleInput(event, 'firstName')} /&gt; </code></pre></div> <p>Our <code>onChange</code> is saying to run the <code>handleInput</code> handler, passing the <code>event</code> values and the <code>firstName</code> key. </p> <p>Our state, then, might look like this:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>this.state = { firstName: '', lastName: '', age: '' } </code></pre></div> <p>If what we pass in our <code>onChange</code> doesn't match a key in our state object, this will not work. </p> <p>All that said – still, where do we do it? </p> <p>Our <code>handler</code> is the perfect place to do this. We're going to pass the data on from our input's <code>onChange</code>, up to our <code>handleInput</code>. Before we <code>setState</code>, we'll perform our logic.</p> <h2> How do we do it? </h2> <p>I wasn't entirely sure how to do this myself, so I had to do some hunting. I knew we'd have to <code>split</code> and <code>join</code> and <code>toUpperCase</code> some things, but wasn't entirely sure beyond that. </p> <p>Turns out, it's quite easy. </p> <p>First of all, let's understand <em>what</em> we are doing it to. Simply put, we need to manipulate our <code>event.target.value</code>, which is whatever the user inputs into that field.</p> <p>Here are all the things we need to perform on our <code>event.target.value</code> input to capitalize the first letter of each word:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> .toLowerCase() .split(' ') .map(s =&gt; s.charAt(0).toUpperCase() + s.substr(1)) .join(' '); </code></pre></div> <ul> <li> <code>toLowerCase()</code> is first making every character lower case. </li> <li> <code>split(' ')</code> takes each character in our original string (<code>event.target.value</code>) and splits them into an array equal to each character in that string. So if our user provided John, we would get <code>[j,o,h,n]</code>. This allows us to <code>map</code> over each character.</li> <li> <code>map(s ...)</code> - Here, we're using <code>s</code> to represent each iteration, so each character, which is a single-character string.</li> <li> <code>map(s =&gt; s.charAt(0) ...)</code> - if our iteration is the character at the <code>0</code> place in our array...</li> <li> <code>map(s =&gt; s.charAt(0).toUpperCase()</code> then capitalize it...</li> <li> <code>map(s =&gt; s.charAt(0).topupperCase() + s.substr(1))</code> - this one is tougher to explain. <code>substr</code> (short for <code>substring</code>) returns the part of the string at the index value you define, and anything after it. In this case, everything but the first index value. Alternatively, we could use it to return maybe just the first two indexes <code>(0, 1)</code> or <code>Jo</code>. We use the <code>+</code> to combine (concatenate) all of the array items together.</li> </ul> <p>So here's what our code should look like:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> let capsText = event.target.value .toLowerCase() .split(' ') .map(s =&gt; s.charAt(0).toUpperCase() + s.substr(1)) .join(' '); </code></pre></div> <p>Now, if we <code>console.log(capsText)</code>, you'll see we get exactly what we want. How do we store that in state? </p> <p>Simple!<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> this.setState({ [key]: capsText }); </code></pre></div> <p>Let's put it all together!<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> handleInput(event, key) { let capsText = event.target.value .toLowerCase() .split(' ') .map(s =&gt; s.charAt(0).toUpperCase() + s.substr(1)) .join(' '); this.setState({ [key]: capsText }); } </code></pre></div> <p>That's it! Not so bad, eh?</p> <p>Thanks for reading.</p> react forms javascript tutorial