Question 280054 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Input Select form

I want to select the associated value of the input select form handleInput in select component to make an issue

C:xampphtdocslaravel-projectclub_member_ship_fypresourcesjsComponentsInputSelect.jsx: Unexpected token, expected "…" (11:59)
14 | 

   <div className="mb-2">
<InputLabel htmlFor="membershipType" value="Select Membership Type" />
                                    <InputSelect options={memberShipType} handleInput={handleInput} id="memberShipTypes" name="member_ship_type" handleChange={handleChange} />
                                    <div className="text-red-500">{fieldErrors.member_ship_type} 
                                   </div>
                                </div>

    'use client';
    
    import { Select } from 'flowbite-react';
    
    let InputSelect = ({ options, handleInput, name, id, handleChange }) => {
        return (
            <div className="max-w-screen-md">
                <Select id={id} name={name} value={handleInput.member_ship_type} onChange={handleChange}>
                    {options.map((item) => (
                        <option value={item.member_ship_type} {handleInput.member_ship_type == item.member_ship_type ? 'selected' : ''} key={item.member_ship_type}>{item.label}</option>
                    ))}
                </Select>
            </div >
        );
    }
    
    export default InputSelect;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is the correct code

    'use client';

import { Select } from 'flowbite-react';

let InputSelect = ({ options, handleInput, name, id, handleChange }) => {
    return (
        <div className="max-w-screen-md">
            <Select id={id} name={name} value={handleInput.member_ship_type} onChange={handleChange}>
                {options.map((item) => (
                    <option value={item.member_ship_type} key={item.member_ship_type}>{item.label}</option>
                ))}
            </Select>
        </div>
    );
}

export default InputSelect;

  2. 0

    To select the associated value of an input select form when handling user input in a React component, you can use the onChange event handler to capture the selected value and update the component’s state accordingly. Here’s an example of how you can achieve this:
    Assuming you have a element in your component’s JSX:

    import React, { useState } from 'react';

function YourComponent() {
  const [selectedValue, setSelectedValue] = useState('option1');

  const handleInput = (event) => {
    const newValue = event.target.value;
    setSelectedValue(newValue);
  };

  // Use selectedValue in your component to make an issue or perform other actions
  // For example, you can make an API call or update some state based on the selected value.

  return (
    <div>
      <select onChange={handleInput}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      <p>Selected value: {selectedValue}</p>
    </div>
  );
}

export default YourComponent;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search