'Is there any method to pass multiple selected option value to MongoDB using React JS?

I want to pass the selected option value to my back end using React Select. First I want to select option from React Select then I want to store into the usestate from where i am sending it to the database.

The code look like:

const options = [
    { value: 'AUD', label: 'AUD' },
    { value: 'CAD', label: 'CAD' },
    { value: 'CHF', label: 'CHF' },
]
export default function MemberInformation() {
    const { t } = useTranslation();

    const value2 = useContext(DataContext);
    const [currency, setCurrency] = value2.currency;
    const[favcur,setFavCur]=useState([]);
     const[memberData,setMemberData]=useState([]);
    const [member,setMember]=useState({_id:"",name:"",prefCurrency:[]})
         var name,valueV;
        const handleInputs=e=>{
          console.log("Updated ",member)
          name=e.target.name;
          valueV=e.target.value;
          setMember({...member,[name]:valueV})
          if (name == "prefCurrency")
          {
            setFavCur(e);
            setMember({...member,[name]:valueV})
            setCurrency(e);
          }
        }
        const postData= ()=>{
          setMemberData({...memberData,...member})
          const { _id,name,prefCurrency}=member;
          var UpdatedMemInfo ={_id,name,,prefCurrency};
          axios.put('/memberInfoUpdate', UpdatedMemInfo)
          .then( res => {
            alert('Updated successfully!');
           }   
          )
          .catch(err => {
            console.log(err.response);
            alert('An error occurred! Try submitting the form again.');
          });
       } 
useEffect(() => {
        async function fetchBooks() {
          const response = await fetch('/memberinfo');
          const json = await response.json();
          setMemberData(json.memberLogin);
          setMember(json.memberLogin);
      }
      fetchBooks();
  },[]);
return (
<div>
 <Row >
                  <Col ><Form.Text className="text-muted">{t('Name')}</Form.Text></Col>
                  <Col><Form.Control size="sm" type="text" name="name" placeholder="Enter Name" value={member.name} onChange={e=>handleInputs(e)}/></Col>
              </Row>
 <Row >
                  <Col ><Form.Text className="text-muted">{t('Preferred Currency')}</Form.Text></Col>
                  <Col>
                  <Select options={options} placeholder="Select Currency" isMulti name="prefCurrency" value={member.prefCurrency}  onChange={handleInputs} />
                   </Col>
              </Row>   
</div>
 )
}

The error is that "Cannot read properties of undefined name" and page appears blank. When i want to select any option value it does not select anything from the options data. preferred Currency(prefCurrency) is basically an array type in mongoose schema. It looks like: enter image description here

How can this issue be solved? , how can i pass multiple selected option value to the MongoDB back end?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source