React.js input dropdown selection, state management and event handling-CodePudding

I want the user to be able to track his medicine. Therefore I have several input fields, which all have the same OnChange event handler (addNewMed). This is used to generate an object with all input data. Now I also would like the user to get a suggestion when typing the medicine name in the input box. I have a function which searches a .json file to give the user a suggestion. If user clicks on suggestion, I want to put this selection directly in the input field. So now this is the problem. How can I combine this with my onChange event handler, which then generates the newMedItem object.

Thanks!

const [newMedItem, setNewMedItem]=useState({
  name: "",
  dosage: "",
  interval: "",
  date:"",
  enddate:""
 });

const addNewMed = function(event){
  const value=event.target.value; 
 setNewMedItem({
  ...newMedItem,
  [event.target.name]: value
 }) 
}

<input type="text" name ="name" value={newMedItem.name} onChange={addNewMed} placeholder="Add new Medication"/>
         
<div className="dropdown">
    if(val.label?.toLowerCase().includes(searchTerm?.toLowerCase()))
          {return val}
    }).map((val, key)=>{
    return(
       <div key={key} onClick={handleMedSelection}>
       {val.label}
            </div>
          )
         })}

<input type="text"  name="dosage" value={newMedItem.dosage} onChange={addNewMed} placeholder="Add Dosage"/>
<input type="text"  name="interval" value={newMedItem.interval} onChange={addNewMed} placeholder="Add Interval"/>
 <input type="date"  name="date" value={newMedItem.date} onChange={addNewMed} placeholder="Add Start Date"/>
<input type="date" name="enddate" value={newMedItem.enddate} onChange={addNewMed} placeholder="Add End Date"/>

CodePudding user response：

You can filter dropdownList by newMedItem.name

const dropDownList = fdaList.list.filter((val) => {
    if (newMedItem.name === "") {
      return true;
    } else if (
      val.label?.toLowerCase().includes(newMedItem.name?.toLowerCase())
    ) {
      return true;
    }
});

Full code should be like this

export default function Main() {
  const defaultMedItem = {
    name: "",
    dosage: "",
    interval: "",
    date: "",
    enddate: ""
  };

  const [newMedItem, setNewMedItem] = useState(defaultMedItem);
  const [searchTerm, setSearchTerm] = useState("");

  const addNewMed = function (event) {
    const value = event.target.value;
    setNewMedItem({
      ...newMedItem,
      [event.target.name]: value
    });
    console.log(newMedItem);
  };

  const handleMedSelection = function (event) {
    setNewMedItem({
      ...newMedItem,
      name: ""
    });
  };

  const dropDownList = fdaList.list.filter((val) => {
    if (newMedItem.name === "") {
      return true;
    } else if (
      val.label?.toLowerCase().includes(newMedItem.name?.toLowerCase())
    ) {
      return true;
    }
  });

  return (
    <div className="container">
      <div className="addItem">
        <h3>Add new Medication</h3>
        <form className="row addItemForm">
          <input
            type="text"
            className="newMed col-3"
            name="name"
            value={newMedItem.name}
            onChange={addNewMed}
            placeholder="Add new Medication"
          />

          <div className="dropdown">
            {newMedItem.name.length >= 2 &&
              dropDownList.map((val, key) => {
                return (
                  <div key={key} onClick={handleMedSelection}>
                    {val.label}
                  </div>
                );
              })}
          </div>

          <input
            type="text"
            className="newMed col-3"
            name="dosage"
            value={newMedItem.dosage}
            onChange={addNewMed}
            placeholder="Add Dosage"
          />
          <input
            type="text"
            className="newMed col-2"
            name="interval"
            value={newMedItem.interval}
            onChange={addNewMed}
            placeholder="Add Interval"
          />
          <input
            type="date"
            className="newMed col-2"
            name="date"
            value={newMedItem.date}
            onChange={addNewMed}
            placeholder="Add Start Date"
          />
          <input
            type="date"
            className="newMed col-2"
            name="enddate"
            value={newMedItem.enddate}
            onChange={addNewMed}
            placeholder="Add End Date"
          />
        </form>
      </div>
    </div>
  );
}

I have created a codesandbox. Hope it help!