Id invalid in react select, axios post request to API-CodePudding

I'm trying to add a Leader to my DB via a post. I want to select a branch so the leader is linked to that branch. but When I select the branch from the select box the Id does not get filled and I get the following error: .branchId: [,…] 0: "The JSON value could not be converted to System.Guid. Path: $.branchId | LineNumber: 0 | BytePositionInLine: 30."

been stuck for a day now, help is muich appreciated

import React, {useState, useEffect} from 'react'
import axios from 'axios'

const LeadersPost = () => {
   const [totem, setTotem] = useState('');
   const [branchId, setBranchId] = useState('')
   const [data, setData] = useState([]);

   useEffect(() => {
    const fetchData = async() => {
        try{
            const {data: response} = await axios.get('https://localhost:7070/api/Branches');
            setData(response);
            } catch (error) {
                console.error(error.message);
            }
    }

    fetchData();
}, []);


   const onSubmit = async (e) => {
       e.preventDefault();
       const data = {
           totem : totem,
           branchId : branchId
       }
       try{
           await axios.post('https://localhost:7070/api/Leaders', data)
           .then(res => {
               setData(res.data);
               setTotem('');
               setBranchId('');
           })
       } catch (error){
           console.error(error.message);
       }
   }

   return(
       <div className='container mt-2'>
           <h2>Leaders Post Request</h2>
           <form onSubmit={onSubmit}>
               <div className='mb-2 mt-3'>
                   <input 
                   type={'text'}
                   placeholder='Leader Totem'
                   className='form-control'
                   value={totem}
                   onChange={e => {
                       setTotem(e.target.value)
                   }} />
                    <select className="form-control" aria-label="Default select example">
                        <option>Choose a branch</option>
                        {
                            data.map(branch => 
                            <option
                            onChange={ e => {
                                setBranchId(e.target.value)
                            }}>
                                {branch.id}
                            </option>)
                        }
                    </select>
                <button type='submit' className='btn btn-primary'>Create</button>   
               </div>
           </form>
       </div>
   )
}

export default LeadersPost

CodePudding user response：

I think you have to just remove onChange={ e => {setBranchId(e.target.value)}} and add onClick={() => setBranchId(branch.id)}.

CodePudding user response：

I don't believe the option fires an onchange event, I could be wrong but if my memory serves me correctly it doesn't. Also just checked MDN web docs and I may be correct in that.

However, I also believe the value of the option not being set would also cause this to happen. You're just setting a textConext on the event, so you could make it work potentially by that too but you may want to take a look at this answer here for select boxes in react.