Получить значение selectedOption.id

Question

Я хочу иметь возможность использовать значение selectedOption, но использовать только значения id. По сути, selectedOption.id. За исключением случаев, когда я использую selectedOption.id, я получаю undefined.

Почему? Что я могу сделать, чтобы это изменить? Я приложил изображение, чтобы указать, о каких данных я говорю. Эта функция handleChange встречается в компоненте Select.

Мой компонентный вывод:

Мой код:

    import React, { useState } from 'react';
    import Select from 'react-select';

    export default function CandidateForm({ handleCreate, job_req_titles }) {
        const [name, setName] = useState('');
        const [email, setEmail] = useState('');
        const [phone, setPhone] = useState('');
        const [facebook, setFacebook] = useState('');
        const [github, setGithub] = useState('');
        const [linkedin, setLinkedin] = useState('');
        const [jobTitle, setJobTitle] = useState('');
        const [company, setCompany] = useState('');
        const [appJobReq, setAppJobReq] = useState('');

        const prepareCandidateObj = () => {
            // Prepare the candidate object
            let candidate = {
                name,
                email,
                phone,
                facebook,
                github,
                linkedin,
                jobTitle,
                company,
                appJobReq,
            };

            console.log(candidate);

            // Pass in the postNewCandidate from the parent component
            // to be called in this component
            handleCreate(candidate);
            // alert('Candidate Submitted!');
        };

        const handleChange = (selectedOption) => {
            setAppJobReq(selectedOption);
            console.log(`Option selected:`, selectedOption);
        };

        return (
            <div className='container'>
                <div className='row'>
                    <label className='name'>Name</label>
                </div>
                <div className='row'>
                    <input
                        className='name-input'
                        type='text'
                        placeholder='Carol Caroller'
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />
                </div>
                <div className='row'>
                    <label className='email'>Email</label>
                </div>
                <div className='row'>
                    <input
                        className='email-input'
                        placeholder='example@email.com'
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </div>
                <div className='row'>
                    <label className='phone'>Phone</label>
                </div>
                <div className='row'>
                    <input
                        className='phone-input'
                        placeholder='(201) 534 2233'
                        value={phone}
                        onChange={(e) => setPhone(e.target.value)}
                    />
                </div>
                <div className='row'>
                    <label className='facebook'>Facebook</label>
                </div>
                <div className='row'>
                    <input
                        className='facebook-input'
                        placeholder='https://www.facebook.com/DilaonRion/'
                        value={facebook}
                        onChange={(e) => setFacebook(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='linkedin'>Linkedin</label>
                </div>
                <div className='row'>
                    <input
                        className='linkedin-input'
                        placeholder='https://www.linkedin.com/DillonRion/'
                        value={linkedin}
                        onChange={(e) => setLinkedin(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='github'>Github</label>
                </div>
                <div className='row'>
                    <input
                        className='github-input'
                        placeholder='https://www.github.com/DilonRion/'
                        value={github}
                        onChange={(e) => setGithub(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='job-title'>Job Title</label>
                </div>
                <div className='row'>
                    <input
                        className='job-title-input'
                        type='text'
                        placeholder='Frontend Developer'
                        value={jobTitle}
                        onChange={(e) => setJobTitle(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='current-company'>Current Company Name</label>
                </div>
                <div className='row'>
                    <input
                        className='current-company-input'
                        type='text'
                        placeholder='Obrien LLC'
                        value={company}
                        onChange={(e) => setCompany(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='job-req'>Applicant Job Req</label>
                </div>
                <div className='row'>

                    <div className='job-req-input'>
                        <Select
                            className='job-req-select'
                            value={appJobReq}
                            onChange={handleChange}
                            options={job_req_titles}
                            isMulti
                            classNamePrefix='select'
                        />
                    </div>
                </div>

                <div className='row'>
                    <label className='applied'>Applied or Sourced</label>
                    <select className='applied-input'>
                        <option disabled defaultValue>
                            --
                        </option>
                        <option value='1'>Applied</option>
                        <option value='0'>Sourced</option>
                    </select>
                </div>
                <button className='create-button' onClick={prepareCandidateObj}>
                    Create
                </button>
            </div>
        );
    }

Answer 1

Поскольку свойство isMulti передано в компонент Select, selectedOption будет массивом выбранных опций. Вы можете использовать метод array map , чтобы получить массив, содержащий только идентификаторы выбранных опций, предполагая, что каждая опция имеет идентификатор:

    const handleChange = (selectedOptions) => {
        const selectedOptionIds = selectedOptions.map(option => option.id)
        console.log("selected option ids:", 
    };