How to pass my data in the backend in my axios reactjs - node.js

Question

I have a problem and I am ensure this is my problem setusername(res.data[0].username)
So basically I watch MERN stack tutorial and I was at my this part 1:27:30. Basically It means to I want to pass my data username based on my list of users in creating exercises. Everything is fine but not only this setusername(res.data[0].username)
Here is the full code.. for Create_exercises()
NOTE I CONVERTED THE CLASS COMPONENT INTO REACT HOOKS SINCE IT KINDA LOOKS UGLY IN MY EYE
function Create_exercise() {
const [username,setusername] = useState()
const [description,setdescription] = useState()
const [duration,setduration] = useState()
const [date,setdate] = useState( new Date() )
const [users, setusers] = useState([])
const handleChangeUsername = e => {
setusername(e.target.value)
}
const handleChangeDesciption = e => {
setdescription(e.target.value)
}
const handleChangeDuration = e => {
setduration(e.target.value)
}
const handleChangeDate = date_new => {
setdate(date_new)
}
const handleSubmit = e => {
e.preventDefault()
const exercise = {
username: username,
description: description,
duration:duration,
date:date
}
console.log(exercise);
axios.post('http://localhost:4500/exercises/add',exercise)
.then(res => console.log(res.data))
.catch(err => console.log(err));
// window.location = '/';
}
useEffect(() => {
// setusers(['test user'])
// setusername('test user')
axios.get('http://localhost:4500/users/')
.then(res => {
if (res.data.length > 0) {
// console.log(users)
// console.log(res.data)
setusers(res.data.map((user => user.username)))
setusername(res.data[0].username)
// console.log(res.data[0].username)
}
})
},[])
return (
<div className='form-container'>
<form action="" onSubmit={e => handleSubmit(e)}>
<div className="title"><h1> Create New Exercise Log</h1></div>
<div className="form-group">
<label htmlFor="">Username: </label>
<select name="" id="">
{
users.map((user,idx) => {
return(
<option
key={user}
value={user}
>
{user}
</option>
)
})
}
</select>
</div>
<div className="form-group">
<label htmlFor="">Description: </label>
<input type="text"
required
className='form-control'
value={description}
onChange={e => handleChangeDesciption(e)}
/>
</div>
<div className="form-group">
<label htmlFor="">Duration (in minutes): </label>
<input type="text"
required
className='form-control'
value={duration}
onChange={e => handleChangeDuration(e)}
/>
</div>
<div className="form-group">
<label htmlFor="">Date: </label>
<div>
<DatePicker
selected= {date}
onChange= {e => handleChangeDate(e)}
>
</DatePicker>
</div>
</div>
<div className="form-group">
<input type="submit" value="Create Exercise Log"/>
</div>
</form>
</div>
)
}
export default Create_exercise
Let say I have 3 items in data that in my mongoDB.. Let say data = [{username:"Johnny",_id:"613fagadafa43d",description:"Egg"},{username:"Lamby",_id:"613dasnaafaF",description:"Betlog"},{username:"Bummby",_id:"613d66naafaF",description:"Betlog"}]
when I am trying to create a exercise that I will choose based on this three.. I always create the first item in data list. So it has something to with this setusername(res.data[0].username) since it is the first index.. I want to create a exercise wherein I can choose whose name should I create the data but I always get this thingy "Johnny" name in the data.. I wanna badly done this so I could understand how mern stack works..I'm so confused..help.
This is also same with Edit_exercise() based on the tutorial of MERN stack at part of MERN 1:45:06
Sorry I'm so bad at this explaining but this is just how I will imagined and describe the problem..I know its kinda simple but I don't know if I ask the right question.
function Edit_exercise() {
const { id } = useParams()
const [username,setusername] = useState()
const [description,setdescription] = useState()
const [duration,setduration] = useState()
const [date,setdate] = useState( new Date() )
const [users, setusers] = useState([])
const handleChangeUsername = e => {
setusername(e.target.value)
}
const handleChangeDesciption = e => {
setdescription(e.target.value)
}
const handleChangeDuration = e => {
setduration(e.target.value)
}
const handleChangeDate = date_new => {
setdate(date_new)
}
const handleSubmit = e => {
e.preventDefault()
const exercise = {
username: username,
description: description,
duration:duration,
date:date
}
console.log(exercise);
axios.put('http://localhost:4500/exercises/update/'+id,exercise)
.then(res => console.log(res.data))
.catch(err => console.log(err));
// window.location = '/';
}
useEffect(() => {
axios.get('http://localhost:4500/exercises/'+id)
.then(res => {
setusername(res.data.username)
setdescription(res.data.description)
setduration(res.data.duration)
setdate(new Date(res.data.date))
})
setusers(['test user'])
setusername('test user')
axios.get('http://localhost:4500/users')
.then(res => {
if (res.data.length > 0) {
setusers(res.data.map((user => user.username)))
setusername(res.data[0].username)
}
})
},[])
return (
<div className='form-container'>
<form action="" onSubmit={e => handleSubmit(e)}>
<div className="title"><h1> Edit Exercise Log</h1></div>
<div className="form-group">
<label htmlFor="">Username: </label>
<select name="" id="">
{
users.map((user,idx) => {
return(
<option
key={user}
value={user}
>
{user}
</option>
)
})
}
</select>
</div>
<div className="form-group">
<label htmlFor="">Description: </label>
<input type="text"
required
className='form-control'
value={description}
onChange={e => handleChangeDesciption(e)}
/>
</div>
<div className="form-group">
<label htmlFor="">Duration (in minutes): </label>
<input type="text"
required
className='form-control'
value={duration}
onChange={e => handleChangeDuration(e)}
/>
</div>
<div className="form-group">
<label htmlFor="">Date: </label>
<div>
<DatePicker
selected= {date}
onChange= {e => handleChangeDate(e)}
>
</DatePicker>
</div>
</div>
<div className="form-group">
<input type="submit" value="Edit Exercise Log"/>
</div>
</form>
</div>
)
}
export default Edit_exercise