Is there any method to post array values from React front end to the MongoDB?

Question

This is my data which i am getting from the API to display at front end.

{
    "id": "1SrGx2uav1jVjThZTuyfzcmk",
    "name": "George",
    "surname": "Watson",
    "prefCurrency": ["AUD", "USD", "CAD"],
}

Below is the function component which is displaying above data and edit the above data. I want to store the multiple selected values from <Select>method below to be stored in the database. Whatever values are selected through <Select> should be stored in member usestate having prefCurrency array in it. And after that i want those value to be post using the postData method into the database. But i am unable to do so.

export default function MemberInformation() {
    const value2 = useContext(DataContext);
    const [currency, setCurrency] = value2.currency;
    const[favcur,setFavCur]=useState([]);
    const [show, setShow] = useState(false);  
    const[memberData,setMemberData]=useState([]);
    const [member,setMember]=useState({_id:"",name:"",surname:"",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);
            // setMemberData({...memberData,[name]:valueV})
            setCurrency(e);
          }
        }
        const postData= ()=>{
          setMemberData({...memberData,...member})
          const { _id,name,surname,prefCurrency}=member;
          var UpdatedMemInfo ={_id, name,surname,prefCurrency};
          axios.put('/memberInfoUpdate', UpdatedMemInfo)
          .then( res => {
            alert('Updated successfully!');
           }   
          )
          .catch(err => {
            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);
          console.log(json.memberLogin)
      }
      fetchBooks();
  },[]);
  return (
    <div className="xnarates">
        <h6 className="xnarateh6" >{t('Member Information')}</h6>
        <div className="xnaratediv2">
        <p>{t('Edit Member Information')}</p>
        <i className="fa fa-pencil-square" onClick={()=>setShow(true)} style={{ fontSize: '1.75em' }} />
      </div>
        <Scrollbars className="scroller" style={{ width:390,height: 400 }}>
        <Table responsive style={{fontSize:"small"}}>
      <tbody>
        <tr>
            <td>{t('Name')}</td>
            <td>{memberData.name}</td>
        </tr>
        <tr>
            <td>{t('Surname')}</td>
            <td>{memberData.surname}</td>
        </tr>

Also i wanted to display the existing data which is fetch from the API in use-effect to be displayed here like all the values stored the prefCurrency array, but its showing nothing here. I want to basically map the values in prefCurrency array inside the retrieved data from the API.

{memberData.prefCurrency.map((item,index)=>{
    <tr>
    <td>{t('Preferred Currency')}</td>
    <td>{item}</td>
  </tr>
  })}
  </tbody>
</Table>
</Scrollbars>
{show==true?
  <Modal show={show}>
        <Modal.Body>
          <Form >
          <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('Surname')}</Form.Text></Col>
              <Col><Form.Control size="sm" type="text" name="surname" placeholder="Enter Surname" value={member.surname} onChange={e=>handleInputs(e)}/></Col>
          </Row>
          <Row >
              <Col ><Form.Text className="text-muted">{t('Preferred Currency')}</Form.Text></Col>
              <Col>

Also in the below code the selected values are not displaying which means its not showing any values being selected from the list of options.

                  <Select options={options} placeholder="Select Currency" isMulti name="prefCurrency"  onChange={e=>handleInputs(e)} />
                  </Col>
              </Row>    
     </Form>
            </Modal.Body>
            <Modal.Footer>
              <Button variant="success" onClick={()=>{setShow(false);postData()}}>
                Save Changes
              </Button>
            </Modal.Footer>
          </Modal>
  :""}
    </div>
  )
}

These are options which are used in

const options = [
    { value: 'AUD', label: 'AUD' },
    { value: 'CAD', label: 'CAD' },
    { value: 'CHF', label: 'CHF' },
    { value: 'CNY', label: 'CNY' },
]

Answer 1

You have to configure your API to consume the post data and send it to MongoDB. Look into the mongoose module and how to connect your DB to your backend. You should really stick to asking one question at a time.