Javascript - React using Select Bootstrap populated from API. After submit form I want to unselect the previous selection

Quijote60
December 8, 2023
136 views
0 votes
2 Answers

After I submit the form I am setting the state to ” for the dropdown but still shows the selected item before I submitted the form. Can you help me to see what is the issue. Thanks

Find below my component code. I am able to reset the other fields but the Select one. Thanks

import React from 'react'
import {Form,Button} from 'react-bootstrap'
import { useState, useEffect, useContext } from 'react'
import { MemberContext } from '../contexts/MemberContext'
import { CategoryContext } from '../contexts/CategoryContext'
import { ContributionContext } from '../contexts/ContributionContext'
const Contribution = () => {

    const {sortedMembers} = useContext(MemberContext);
    const {sortedCategories} = useContext(CategoryContext);
    const {addContribution} = useContext(ContributionContext);
    const date1 = new Date();
    const defaultValue = date1.toLocaleDateString('en-CA');
    const [memberID, setMemberID] = useState([{'memberID':'','last_name':''}])
    const [date, setDate] = useState(defaultValue);
    const [notes, setNotes] = useState('');
    const [amount, setAmount] = useState(null);
    const [categoryID, setCategoryID] = useState('');

    const onSubmit = e => {
        e.preventDefault();
    
       
        addContribution(memberID,date,notes,amount,categoryID);
           
            setMemberID('');
            setNotes('');
            setAmount('');
            setCategoryID('');
            
        };
    return (
    <>
    <div className='container mt-5 ' >
    

    
<Form onSubmit={e => onSubmit(e)} >
<h1>Add Contribution</h1>
<br/>
    <br/>
<Form.Select aria-label="Default select example" className='form-control' onChange={(e) => setMemberID(e.target.value)}>
  <option >Choose MemberID</option>
 
  {
    sortedMembers.map(item =>(
        <option value={item.memberID } key={item.id} >{item.memberID} : {item.first_name} {item.last_name} </option>
    ) )
  }
  </Form.Select>
  <Form.Group className="form-control" >
    <Form.Control type="date" placeholder="Date *"  value={date} name="date" onChange={(e) => setDate(e.target.value)}/>
  </Form.Group>

  <Form.Group className="form-control" >
    <Form.Control type="text" placeholder="Notes *"  name='notes' value={notes} onChange={(e) => setNotes(e.target.value)} />
  </Form.Group>
  <Form.Group className="form-control" >
    <Form.Control type="number" placeholder='Amount *' name='amount' value={amount} onChange={(e) => setAmount(e.target.value)} min={0}/>
  </Form.Group>
  <Form.Select aria-label="Default select example" className='form-control'onChange={(e) => setCategoryID(e.target.value)}>
  <option >Choose Category</option>
  {
    sortedCategories.map(cat =>(
        <option value={cat.id} key={cat.id} >{cat.category}  </option>
    ) )
  }
  </Form.Select>
  
  

  <Button variant="primary" type="submit">
    Submit
  </Button>
</Form>
</div>
</>

)
}

export default Contribution

Answers

- JeetVani
- December 8, 2023 at 6:05 pm
- 0 votes
0
It looks like there’s a typo in your state variable name. You are using setCategpryID for the state variable, but it should be setCategoryID. The typo might be the reason why your dropdown value is not resetting as expected.

Here’s the corrected part of your code:
```
const Contribution = () => {
  // ... other code ...

  const [memberID, setMemberID] = useState([{'memberID':'','last_name':''}]);
  const [date, setDate] = useState(defaultValue);
  const [notes, setNotes] = useState('');
  const [amount, setAmount] = useState(null);
  const [categoryID, setCategoryID] = useState(''); // Fix the typo here

  // ... other code ...

  const onSubmit = e => {
    e.preventDefault();

    addContribution(memberID, date, notes, amount, categoryID);

    setMemberID('');
    setNotes('');
    setAmount('');
    setCategoryID(''); // Fix the typo here
  };

  return (
    <>
      <div className='container mt-5 '>
        {/* ... other code ... */}
      </div>
    </>
  );
};

export default Contribution;
```
Make sure to change setCategpryID to setCategoryID in both the state declaration and the setCategoryID(''); line inside the onSubmit function. This should resolve the issue you’re facing with the dropdown not resetting after form submission.
Login or Signup to reply.

- BhaveshParvatkar
- December 8, 2023 at 8:28 pm
- 0 votes
0
In your code you are missing value property in the default option. Try changing <option >Choose MemberID</option> to <option value="">Choose MemberID</option>

Login or Signup to reply.