how can i solve a key value select input problem

Question

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.

Answer 1

It looks like you are using the react-form-input-fields library to render a select input in your React app. To display the label in the select input instead of the value, you need to specify the displayKey prop in the FormField component.

Here is how you can modify your code to display the label in the select input:

<FormField
  type="select"
  value={type}
  option={types}
  label={"Select your type"}
  keys={"country"}
  displayKey="label"  // specify the displayKey prop
  handleOnChange={(value) => handletype(value)}
/>

This will display the label field of the types array in the select input, and the selected value will be the corresponding value field.

Answer 2

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>
  );
}