DEV Community

Cover image for Simple React Dropdown List Component
Diego Lorenesi
Diego Lorenesi

Posted on

3

Simple React Dropdown List Component

So here's something I had a tough time googling. I needed to create a dropdown list that makes the component re-render once selected using react hooks. Although it's incredibly simple, I was stumped for quite some time. Here's the code:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [selectedValue, setSelectedValue] = useState(0);
  const items = [
    { label: "Default", value: selectedValue },
    { label: "2 Rows", value: 2 },
    { label: "4 Rows", value: 4 },
    { label: "6 Rows", value: 6 }
  ];

  const handleChange = (event) => {
    console.log(event.target.value);
    setSelectedValue(event.target.value);
  };

  return (
    <div className="App">
      <h1>Simple Dropdown List</h1>
      <form>
        <select className="form-select" onChange={handleChange}>
          {items.map((item) => (
            <option key={item.label} value={item.value}>
              {item.label}
            </option>
          ))}
        </select>
      </form>
      <p>You have selected: {selectedValue}</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Hope this helps!

Quadratic AI

Quadratic AI – The Spreadsheet with AI, Code, and Connections

  • AI-Powered Insights: Ask questions in plain English and get instant visualizations
  • Multi-Language Support: Seamlessly switch between Python, SQL, and JavaScript in one workspace
  • Zero Setup Required: Connect to databases or drag-and-drop files straight from your browser
  • Live Collaboration: Work together in real-time, no matter where your team is located
  • Beyond Formulas: Tackle complex analysis that traditional spreadsheets can't handle

Get started for free.

Watch The Demo 📊✨

Top comments (0)

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay