'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:
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 |
---|