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.
Source: stackoverflow.com
Related Query
- Getting selected value from dropdown with the data from the row in table in ReactJS
- Cannot get the Selected Value from Materialize dropdown with React JS
- How to change the selected table row background color with React
- select option from dropdown using API and get that selected value but i am getting last value which i have not selected in react
- Retrieve row value selected in a Table as an array and send the results to another function on React
- Unable to get the selected value from the React fluent UI dropdown
- Laravel 5.5 render a React component in a blade view with data from the controller
- React query mutation: getting the response from the server with onError callback when the API call fails
- how to get the key of a selected value from a dropdown in reactjs?
- How to get the selected value from a radio button group in React where there are multiple groups?
- How to change the selected table row background using Material-UI on React
- How to set the default react context value as data from firestore?
- How to fix the state update in react while getting data from firestore database
- How to Map the data that I am getting from ajax React js?
- Trying to get data of the row clicked of the table react js
- Problem fetching data from inner join table with axios in react
- Problem to delete a row from a table with React
- How to get data from table row click using Semantic's React Table Component
- I get data from Api but when I try to set the value with useState it give me an empty object
- How to get the value of selected option from React hooks?
- How to pass data from React client into the Oauth2.0 Google strategy flow with passport.js
- React Native-How do I start a TextInput with a value read from AsyncStorage when loading/rendering the screen first time in functional component?
- How can I get the right data from database with react
- Getting the correct data from selected item using useParams
- how to delete a row from the table with a button on react?
- Why do I get an array of promises when getting data from the blockchain with useEffect?
- Not getting data from nodejs server for the first time in React
- React - how to set state with the data from a resolved promise
- React-table: How to sort table data based on the changed cell value (override the default sorting with cell props.value)?
- How to show the specified table row data based on the filter option in react js
More Query from same tag
- collapseOnSelect in react-bootstrap navbars with react-router-dom NavLinks
- How to style child elements in React's SCSS module?
- How to dispatch multiple actions in react redux?
- How to chain useState() method from React hook
- axios.get returns empty array in data
- Too many re-renders when using custom hook
- NodeJS user authentication with JWT
- How do I mock a function within a functional component in Typescript?
- How trigger mapDispatchToProps action in button?
- What is the right name of event handler? onClick or handleClick?
- Imported script does not compile with Babel
- How can I stop setInterval?
- Unable to get current route inside component class
- How to debug this Firestore/React expression?
- How to access auto-bound functions from React class?
- How can I show a redux-form warning as a result of async-validation?
- How do I call 2 api in one class so that both work? (React)
- Can we use action.payload on multiple object keys?
- File upload with multer refreshes React app
- How to dynamically add data to a table via map/if or terinary operator in JSX
- SocketIo: Unable to emit event from react frontend to node backend
- The <Link> from react-router-dom does not change the URL
- react semantic dropdown not working on Enter key
- npm start error with create-react-app with an Error Called -ELIFECYCLE
- Expandable layout for input box
- Can't pass children with props using React.cloneElement?
- React sending data from one component to another one
- how can we use redux state in useState to set initial values
- override focus trigger for input box
- React assign key to already rendered component