title: How should I retrieve the other fields or data depending on what was selected by the user?
body: <p>I have this select component that takes the data from the firestore which was done in the parent component.</p>
  <pre><code>const SelectVaccine = ({ value, onChange, vaccines }) =&gt; {
    return (
      &lt;div&gt;
        &lt;FormControl fullWidth&gt;
          &lt;InputLabel htmlFor=&quot;vaccine&quot;&gt;Vaccine Type&lt;/InputLabel&gt;
          &lt;Select value={value} onChange={onChange} fullWidth&gt;
            {vaccines &amp;&amp;
              vaccines.map((index) =&gt; (
                &lt;MenuItem
                  key={index.vaccine}
                  value={index.vaccine}
                  // defaultValue={}
                &gt;
                  {index.vaccine}
                &lt;/MenuItem&gt;
              ))}
          &lt;/Select&gt;
        &lt;/FormControl&gt;
      &lt;/div&gt;
    );
  };
  
  export default SelectVaccine;
  </code></pre>
  <p>This is a document inside the vaccines collection:</p>
  <p><a href="https://i.stack.imgur.com/MD1YA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MD1YA.png" alt="enter image description here" /></a></p>
  <p>I have this <code>SelectVaccine</code> component inside this parent form where the user can select what type of vaccine was administered. Depending on the vaccine that was selected especially for those with 2 dosages like AstraZeneca. There are days apart from the 1st and 2nd doses. I wanted to have an estimated date for the 2nd dose of the vaccine. How can I access the field <code>daysApart</code> from my firestore so I can add the <code>daysApart</code> to the date of the first dose of vaccine? Thank you.</p>
  <p>I have this parent component with a form.</p>
  <pre><code>const Scan = ({ scanResult }) =&gt; {
    const [firstDose, setFirstDose] = useState(new Date().toLocaleDateString());
   
    //for the vaccines
    const [vaccines, setVaccines] = useState([]);
    useEffect(() =&gt; {
      const unsubscribe = firestore
        .collection(&quot;vaccines&quot;)
        .onSnapshot((snapshot) =&gt; {
          const arr = [];
          snapshot.forEach((doc) =&gt;
            arr.push({
              ...doc.data(),
              id: doc.id,
            })
          );
          setVaccines(arr);
        });
  
      return () =&gt; {
        unsubscribe();
      };
    }, []);
  
    const [selectedVaccine, setSelectedVaccine] = useState(0);
    const handleChangeVaccine = (e) =&gt; setSelectedVaccine(e.target.value);
    console.log(selectedVaccine);
    //--------------------------------------------------------------------
  
    //for the estimated 2nd Dose of vaccine------------------------------
    const date = new Date();
    var newdate = new Date(date);
  
    newdate.setDate(newdate.getDate() + 28);
  
    var dd = newdate.getDate();
    var mm = newdate.getMonth() + 1;
    var y = newdate.getFullYear();
  
    const secondDose = mm + &quot;/&quot; + dd + &quot;/&quot; + y;
    const [secDose, setSecDose] = useState(secondDose); //variable for 2nd dose
  
  
    return (
      &lt;Card&gt;
        &lt;CardContent&gt;
          {isLoading ? (
            &lt;&gt;
              {users &amp;&amp;
                users.map((user) =&gt; (
                  &lt;li style={{ listStyle: &quot;none&quot; }}&gt;
                    &lt;form onSubmit={handleSubmit}&gt;
                      &lt;Grid container direction={&quot;column&quot;} spacing={2}&gt;
                           &lt;SelectVaccine
                        value={selectedVaccine}
                        onChange={handleChangeVaccine}
                        vaccines={vaccines}
                      /&gt;
                        &lt;Grid item&gt;
                      &lt;TextField
                        type=&quot;text&quot;
                        label=&quot;1st Dosage&quot;
                        variant=&quot;outlined&quot;
                        value={firstDose}
                        onChange={(e) =&gt; setFirstDose(e.target.value)}
                        fullWidth
                      /&gt;
                    &lt;/Grid&gt;
                       {selectedVaccine == &quot;J&amp;J&quot; || selectedVaccine == &quot;&quot; ? (
                      &lt;&gt;&lt;/&gt;
                    ) : (
                      &lt;&gt;
                        &lt;Grid item&gt;
                          &lt;MuiPickersUtilsProvider utils={DateFnsUtils}&gt;
                            &lt;DatePicker
                              format=&quot;MM/dd/yyyy&quot;
                              value={secDose}
                              onChange={setSecDose}
                              fullWidth
                              id=&quot;date-picker-inline&quot;
                              label=&quot;Estimated 2nd Dose of Vaccination&quot;
                            /&gt;
                          &lt;/MuiPickersUtilsProvider&gt;
                        &lt;/Grid&gt;
                      &lt;/&gt;
                    )}
                        &lt;Grid&gt;
                          &lt;ButtonForm type=&quot;submit&quot; fullWidth&gt;
                            Submit
                          &lt;/ButtonForm&gt;
                        &lt;/Grid&gt;
                      &lt;/Grid&gt;
                    &lt;/form&gt;
                  &lt;/li&gt;
                ))}
            &lt;/&gt;
          ) : (
            &lt;h1&gt;Loading...&lt;/h1&gt;
          )}
        &lt;/CardContent&gt;
      &lt;/Card&gt;
    );
  };
  
  export default Scan;
  </code></pre>