score:0

i think a combination of usestate and useeffect would help here actually. not sure what else you'll need to do to filter the table or anything, but something like this should help:

import react, { useeffect, usestate } from "react";

// i have a requirement where i render a table from
// array passed as props to the component. table contain s
// dropdown in each row and on selecting any value from dropdown,
// i want to call external apis based on the selected value.
// the api also requires key1 value from td for which dropdown
// value was changes?

// i am facing a problem where i can't get selected action
// and key1 value into the api call function. plus, if i select a
// value from dropdown, all dropdown values are changed simultaneously
// (i can understand why it is happening). how to avoid this? or may be,
// it can not be avoided, is there a better way to render same thing in
// other way which allows for the required functionality?

export default function ({ alerts }) {
  // constructor(props) {
  //   super(props);
  //   this.callapi = this.callapi.bind(this);
  //   this.state = {
  //     container: "",
  //     action: ""
  //   };
  // }
  const [selectedaction, setselectedaction] = usestate({});
  const [key1value, setkey1value] = usestate();
  useeffect(() => {
    if (selectedaction === "a") {
      // fetch api call here should be able to access key1value
      // requires container as well as action state which shoould be set to key1 from the same row whenever value is changed for dropdown
      //...
    } else {
      // alternate fetch api call here
      // requires container state which shoould be set to key1 from the same row whenever value is changed for dropdown
      //...
    }
  }, [selectedaction]);

  return (
    <table>
      <tr>
        <th> subject </th>
        <th> source </th>
        <th> actions </th>
      </tr>
      {alerts.map((alert) => (
        <tr key={alert.id.tostring()}>
          <td>{alert.key1}</td>
          <td>{alert.key2}</td>
          <td>
            <select
              onchange={(e) => {
                setkey1value(alert.key1);
                setselectedaction({...selectedaction, [alert.key1]: e.target.value});
              }}
              value={selectedaction[alert.key1]}
              name="actions"
              id="actions"
            >
              <option hidden disabled selected value>
                select an action
              </option>
              <option value="a">action a</option>
              <option value="b">action b</option>
            </select>
          </td>
        </tr>
      ))}
    </table>
  );
}

sandbox link if you wanna make adjustments and play around: https://codesandbox.io/s/hungry-grass-hndhp?file=/src/app.js:0-1539

i think if you need to have the inputs keep track of different values and not all change at once then you could an object to store them where the keys are the alert.key1 and the value is the currently selected value. i feel like more information about what you're actually trying to do might help here.


Related Query

More Query from same tag