I need the function to be called only once the user is done typing

Question

I am changing a user input that use to take a number of keys and values to add to an object in an array. Now there will only be a single string inside the object inside the array or atleast thats my hope. I dont want to change the backend if i dont have to. So right now I am having the trouble of the string value saving in a number of different objects with each letter typed for example:

1: "T"
2: "Th"
3: "Thi"
4: "Thin"
5: "Thing"
6: "Things"

so I'm wondering how can I have the value only saved once the user is done typing so only one array is saved?

Ive tried using an async function but I ended up with the same results my code looks like this:

... const recommendedDescription = async (value) => {
    try {
      let rec = await value
      handleMedicationChange(rec)
    }catch (error) {
      console.log(error)
    }
   
    return 
  }
  const handleMedicationChange = (value, medicationNames) => {
    let medications = detailedTreatmentPlan.recommendedMedications || [];
  
    // medications = medications.filter(
    //   (item) => !medicationNames.includes(item.name)
    // );
    console.log(value)
    medications.push(value);
    const data = update(detailedTreatmentPlan, {
      recommendedMedications: { $set: medications }
    });

    props.onUpdate("detailedTreatmentPlan", data);
  };

return (
<ContentBlock title="Recommended OTC Medication">
        <Input
          type="textarea"
          note={detailedTreatmentPlan["recommendedMedications"]}
          placeholder="Help"
          
          onChange={e => recommendedDescription(e.target.value)}
          className="recommendedMedications"
          name="recommendedMedications"
          id="recommendedMedications"
        />
      </ContentBlock>
)

You're probably looking to debounce the method bound to onChange. https://stackoverflow.com/questions/24004791/can-someone-explain-the-debounce-function-in-javascript — MisterCurtis, Nov 05 '20 at 21:52
You can use `onBlur` event along with `onChange`. On `onChange`, store the value in react local state and on `onBlur` event read the value from local state and call the backend API. — Akanksha singh, Nov 06 '20 at 02:44

I need the function to be called only once the user is done typing

0 Answers0