CODEWITHSUNDEEP
javascriptreactjs
VicHofs
VicHofs

Reputation: 311

<select> tag in react not changing when selecting option

I have this component in my react app (named <Dropdown/>) that has a <select> tag inside. For the most part, things work normally, but whenever I select one of the options, instead of having the <select> change and display the picked option, it just defaults back to the original value. I have no clue what's going on and help would be appreciated.

import React from "react";
import "./Dropdown.css";

export default function Dropdown(props) {
    let flavorTexts = props.data;
    return(
        <select className="listDrop" onChange={props.onChange}>
            {flavorTexts.map((entry) => <option className="listElement" value={{lang: entry.language.name, ver: entry.version.name}}>{entry.language.name} — {entry.version.name}</option>)}
        </select>
    );
}

import React, { useState } from 'react';
import '../../App.css'
import Dropdown from '../buttons/Dropdown';

function Search() {
  const [flavorVersion, setFlavorVersion] = useState({lang: 'en', ver: 'x'});

  const versionHandler = (selection) => {
    setFlavorVersion(selection);
  }
(...)
      return (
      <>
        (...)
            {data.description.filter((entry) => entry.language.name === flavorVersion.lang && entry.version.name === flavorVersion.ver).map(entry => <p className="dataEntry">{entry.flavor_text}</p>)}
(...)
        <Dropdown data={data.description} onChange={(e) => versionHandler(e.target.value)}/>
      </>
    )
(...)

Upvotes: 2

Views: 2774

Answers (2)

Marco Mesen
Marco Mesen

Reputation: 675

You need to use value on your select tag, value={selected}

import React from "react";
import "./Dropdown.css";


export default function Dropdown(data, onChange, selected) {
    let flavorTexts = data.data;
    console.log('dropdown got: ', flavorTexts);
    return(
        <select className="listDrop" onChange={onChange} value={selected}>
            {flavorTexts.map((entry) => <option className="listElement" value={{lang: entry.language.name, ver: entry.version.name}}>{entry.language.name} — {entry.version.name}</option>)}
        </select>
    );
}

selected parameter should come from your state, the function onChange should control this state

This is a clear example to handle the state of select input (useEffect is only to see the result of update the state)

import React, { useState, useEffect } from 'react';

const options = [
  { id: 1, name: 'option 1' },
  { id: 2, name: 'option 2' },
];

export const Form = () => {
  const [form, setForm] = useState({ selected: '' });

  useEffect(() => {
    console.log(form);
  }, [form]);

  const handleChange = e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  };

  const handleSave = () => {};
  return (
    <form onSubmit={handleSave}>
      <div>
        <select name='selected' value={form.selected} onChange={handleChange}>
          <option value=''>Select Option</option>
          {options.map(option => (
            <option key={option.id} value={option.name}>
              {option.name}
            </option>
          ))}
        </select>
      </div>
    </form>
  );
};

React's Documentation has this example: Documentation

Upvotes: 2

VicHofs
VicHofs

Reputation: 311

I fixed it. The issue was actually that I was re-rendering the main component every time the selection changed and thus resetting the dropdown. My bad. Thanks for the help XP

Upvotes: 1

Related Questions