The latest articles on Forem by Vivek (@vivek_44751fc408644cbd80b). https://forem.com/vivek_44751fc408644cbd80b 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%2F1521794%2Fc6647224-e09f-428a-a122-07d1845bef6d.png https://forem.com/vivek_44751fc408644cbd80b en Vivek Fri, 24 May 2024 16:02:04 +0000 https://forem.com/vivek_44751fc408644cbd80b/userouter-import-from-nextnavigation-or-nextrouter-in-app-router-next-js-2pne https://forem.com/vivek_44751fc408644cbd80b/userouter-import-from-nextnavigation-or-nextrouter-in-app-router-next-js-2pne <p>Hi devs, in this article we will learn which solution is better for us.<br> So many developers facing issue while using useRouter in next JS.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import { useRouter } from "next/router"; const router = useRouter(); </code></pre> </div> <p>The above import is not working in next JS when we are using app router.</p> <p>So as documentation next js allow useRouter from next/navigation in App Router.<br> Here is the way of importing the useRouter in App Router.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import { useRouter } from "next/navigation"; const router = useRouter(); </code></pre> </div> <p>Thank you for reading. That’s all for today.</p> javascript nextjs userouter react Vivek Thu, 23 May 2024 21:17:30 +0000 https://forem.com/vivek_44751fc408644cbd80b/how-to-use-the-tag-with-multiple-values-using-the-map-method-in-reactjs-59df https://forem.com/vivek_44751fc408644cbd80b/how-to-use-the-tag-with-multiple-values-using-the-map-method-in-reactjs-59df <p>Hi Devs, in this article, I’m going to show you how to use the Select HTML tag in React JS. As you all know, we use JSX to write HTML in React. Let’s see how we can do this.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdjc1vnobc08aujr5rugo.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdjc1vnobc08aujr5rugo.png" alt="Image description"></a></p> <ol> <li>Now, we have an array containing the names of cities. So we render this in Web Page using a map method.</li> </ol> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foj988rzdsbmr2e1p41x2.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foj988rzdsbmr2e1p41x2.png" alt="Image description"></a></p> <ol> <li>This is a simple method for using the HTML Select tag. However, we won’t be using this method as it’s considered old school. Instead, we are going to use the Map method.</li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> &lt;select name="cities" id="cities"&gt; &lt;option value="New York"&gt;New York&lt;/option&gt; &lt;option value="Chicago"&gt;Chicago&lt;/option&gt; &lt;option value="Chicago"&gt;Los Angeles&lt;/option&gt; &lt;/select&gt; </code></pre> </div> <ol> <li>The map method in JSX is used to iterate over an array and render a list of elements dynamically.</li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> &lt;select name="cities" id="cities" &gt; {cities.map((ele, key) =&gt; ( &lt;option value={ele} key={key}&gt; {ele} &lt;/option&gt; ))} &lt;/select&gt; </code></pre> </div> <ol> <li>In this final step, we will see how to get the current element in an Select tag using the onChange method. The onChange event is triggered when the value of an input element, like a text field or dropdown, changes. It allows you to capture and respond to the new value.</li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> const cities = ["New York", "Los Angeles", "Chicago"] const handleChange =(e)=&gt;{ console.log(e.target.value) } &lt;select name="cities" id="cities" onChange={(e)=&gt;handleChange(e)} &gt; {cities.map((ele, key) =&gt; ( &lt;option value={ele} key={key}&gt; {ele} &lt;/option&gt; ))} &lt;/select&gt; </code></pre> </div> <p>Thank you for reading this article. please follow for more articles.</p> javascript webdev