how can i solve a key value select input problem

December 24, 2022

im just testing this reactjs npm but when i use the select input it just show up de value pair insted of the label pair

this is the piece of the code:

import "./styles.css";
import React, { useState, useEffect } from "react";
import { FormField } from "react-form-input-fields";
import "react-form-input-fields/dist/index.css";

export default function App() {
  let [type, setType] = useState("All");
  const types = [
    { label: "All", value: "All" },
    { label: "Skins", value: "outfit" },
    { label: "Banners", value: "banner" },
    { label: "Wraps", value: "wrap" },
    { label: "Sprays", value: "spray" },
    { label: "Emoji", value: "emoji" },
    { label: "Pickaxe", value: "pickaxe" },
    { label: "Gliders", value: "glider" },
    { label: "Loading screens", value: "loadingscreen" },
    { label: "Emotes", value: "emote" }
  ];

  function handletype(e) {
    setType(e);
  }

  return (
    <div className="App">
      {/* <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2> */}
      <FormField
        type="select"
        value={type}
        option={types}
        label={"Select your type"}
        keys={"country"}
        handleOnChange={(value) => handletype(value)}
      />
    </div>
  );
}

here is the link from codesanbox

https://codesandbox.io/s/select-problem-ykplcm

i have trid using map and filter functions on value property component and i still dont get what i want.

>Solution :

Store the whole selected type in the state.
Then use type.label as the value.

import "./styles.css";
import React, { useState, useEffect } from "react";
import { FormField } from "react-form-input-fields";
import "react-form-input-fields/dist/index.css";

export default function App() {
  let [type, setType] = useState({ label: "All", value: "All" });   // The state contains an object.
  const types = [
    { label: "All", value: "All" },
    { label: "Skins", value: "outfit" },
    { label: "Banners", value: "banner" },
    { label: "Wraps", value: "wrap" },
    { label: "Sprays", value: "spray" },
    { label: "Emoji", value: "emoji" },
    { label: "Pickaxe", value: "pickaxe" },
    { label: "Gliders", value: "glider" },
    { label: "Loading screens", value: "loadingscreen" },
    { label: "Emotes", value: "emote" }
  ];

  function handletype(e) {
    // Find the selected object based on the returned value
    const selected = types.filter((type) => type.value === e)[0]
    console.log(selected)
    // Set state with it.
    setType(selected);
  }

  return (
    <div className="App">
      {/* <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2> */}
      <FormField
        type="select"
        value={type.label}  // The label property of the stored state is used here
        option={types}
        label={"Select your type"}
        keys={"country"}
        handleOnChange={(value) => handletype(value)}
      />
    </div>
  );
}