skip to Main Content

I’m working on a React Front End project where users can fill in form fields (including textboxes, check boxes, and select boxes). Here’s the scenario:
In the initial state, the user fills in the name, age, and nationality, and checks the checkbox.
Upon clicking “Save,” all the entered data is saved as a JSON file, stored with a variable name.
these values stored in the backed end with the End Point /read-value/
Later, when the user wants to refill the fields, they select a name from a drop-down.
The goal is to automatically populate the form fields (name, age, nationality,single) based on the selected name from the JSON data.

The issue I’m facing is that even though the other text fields are getting populated as expected but not the checkbox ,the checkbox value is saved as true in the JSON file,but it doesn’t automatically check when refilling the form.

How can I ensure that the checkbox state reflects the saved value from the JSON data when refilling the form?

I tried this code:

function SaveForm({ selectedName }){
  const [formData, setFormData] = useState({
    name: '',
    nationality: '',
    age: '',
    single: false,  
  });
  const [isSelected, setIsSelected] = React.useState(false);

  const fetchDefault = async () => {
    const response = await fetch(${apiUrl}/read-value/);
    const newData = await response.json();
    
    setResults(newData.results)
   
  };
  
  useEffect(() => {
    setFormData(prevState => ({
      ...prevState,
      
      ["name"]: selectedName,
    
    }));
   fetchDefault()
   // setFormData(formData.name)
  }, [selectedName])

  const setFormDefaults =(data)=>{
    setFormData(prevState => ({
      ...prevState,
      ["name"]: data.name,
      ["nationality"]:data.nationality,
      ["age"]:data.age,
      ["single"]: data.single ,
    }));
  }
  const handleChange = event => {
    const { name, value } = event.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value,
    }));
  };

  return (
    <div>
      <ServiceSelect results={results} setFormData={setFormDefaults}/>
      <form onSubmit={handleSubmit}>
      <Checkbox 
        name="single" 
        value ={ formData.single}  
        onValueChange={setIsSelected} 
        onChange={handleChange} 
        >single</Checkbox>
         <br></br>

2

Answers


  1. Chosen as BEST ANSWER

    Thanks everyone for your help,Finally I found the answer that i need :

    <Checkbox 
          
          name="single"
          isSelected={formData.single}
          onValueChange={(value) => {
            handleChange({
              target: {
                name: 'single',
                value: value,
              },
            });
          }}
            
            >single</Checkbox>
    

  2. //<data.single == json value for your checkbox, (true or false if i understand correctly..) from the json object ‘data’

    if (data.single){
        <yourcheckbox>.setAttribute('checked' 'true');
    };
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search