CODEWITHSUNDEEP
reactjstypescriptdrop-down-menuchakra-uiselectedvalue
ifsm
ifsm

Reputation: 11

What to modify to pass selectedvalue to the whole form using Chakra and React?

I did a dropdown list using Chakra and React for a form and want the selectedValue to pass into the previously created state.

This is the dropdown component:

const FormOption: FC<OptionList> = ({name, values}) => {
const [selectedValue, setSelectedValue] = useState(values);
const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
    let selectedValue = e.target.value;
    setSelectedValue(selectedValue);
    console.log(selectedValue);
} 
return (
    <>
    <Select placeholder="Select one option" onChange={handleChange} value={selectedValue}>
        {
    LISTS
    .filter(list => list.name === name) 
    .map((list, idx) => 
        <option key={idx} value={list.values}>{list.values}</option>)
    }
    </Select>

I want to pass the value to here (experience, jobtitle, interest) in the console:

    let [mentorInfo, setMentorInfo] = useState<MentorInfo>({
    role: 'mentor',
    bio: '',
    expertise: '',
    experience: {selectdValue},
    jobTitle: {selectdValue},
    interests: {selectdValue},
    hourlyRate: '',
   });

  const handleChange = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
   ) => setMentorInfo({ ...mentorInfo, [e.target.name]: e.target.value });
   console.log(mentorInfo);

I am thinking I have to change something on the handleChange in the form component but how? Now the console still showed selectedvalue from the dropdown component, not as part of the form.

Additional info:

The LISTS array has these values for the dropdown, which basically filter based on name and iterate the option. And the OptionList interface defined the LISTS types which are string and string[]

 export const LISTS = [
  {
    name: "experience",
    values: "0-2 years",
  },
  {
    name: "experience",
   values: "2-4 years",
  },
  {
    name: "experience",
    values: "10+ years",
  },
  {
    name: "jobTitle",
    values: "Unemployed/ Non-Tech",
  },
]

Upvotes: 0

Views: 577

Answers (1)

altoqueperro
altoqueperro

Reputation: 379

Hey you need to do a simple changes over your handleChange method,

  const handleChange = (e, index) => {

    // you get the selected option value
    
    let selectedValue = e.target.value;

    // you get the index of the selected option
    const indexSelected = e.target.selectedIndex;

     // then once you have the index you can access to the object of the LISTS
    const selectedObject = LISTS[indexSelected];
    
    setSelectedValue(selectedValue);

    // take the name of the selected option Object and assign as access key to mentorInfo then assign the value 
    mentorInfo[selectedObject.name] = selectedObject.values; 

    // make a new copy of mentorInfo and set
    setMentorInfo({ ...mentorInfo }); 
    console.log(mentorInfo);
  };

I made a stackblitz for you i you want to check the solution more in deep

solution stackblitz

Have a good one!

Upvotes: 0

Related Questions