score:1
would be much easier to have something like:
<button value={stats.player} onclick={() => handleclick(stats.player)}>
{stats.player}
</button>
...
const handleclick = (player) => {
setplayer(player);
loadpeople();
}
in this way you don't need id
for button
. not only but you will avoid warning on same id for multiple elements.
then i would like to talk about loadpeople()
. if i understood correctly in this function you are using player
that would be setted by setplayer
.
this is not a good approach. setplayer
is async and you could take an old value of player
. much better pass the last player
value directly to loadpeople
function. something like:
const handleclick = (player) => {
setplayer(player);
loadpeople(player);
}
const loadpeople = async (newplayer) => {
setloading(true);
const req = await fetch(`/api/player/${newplayer}`);
const json = await req.json();
setteams(json);
setloading(false);
};
Source: stackoverflow.com
Related Query
- Onclick function for multiple buttons with same ID?
- Rendering multiple buttons with onClick function in React
- Broadly, I'm looking for ways to possibly condense my very repetitious code. Specifically, trying to access multiple states with the same function
- How can i target specific button's styling with onClick function if i have the same onClick function attached to multiple buttons?
- Multiple popovers for different buttons with same Id
- How to get the label and values from multiple TextArea material ui with same onchange function for all?
- Multiple event handlers for the same event and element with Reactjs
- How to reuse the same Redux Saga for multiple React components with their own state?
- React - how to render multiple buttons with a regular for loop?
- Use click handler to change color of button when there are multiple buttons using the same function
- (react,antd,card) How can I block the onclick function from action buttons with antd card component?
- Optimized way to toggle multiple divs with the same handling function in React
- how do control the state for multiple component with one function
- For object with multiple arrays, return array based on checking two values inside the same array
- React redux update state onClick function with multiple actions
- Cleanup does not prevent error for finding multiple elements with the same role
- reactjs form: with two submit buttons doing two different tasks for same form
- What can i pass in as placeholder for first argument in map function Warning: Encountered two children with the same key, `[object Object]`
- Problem with use of map function in react for setting text and color of buttons
- I have multiple onClick button and whenever I click 1 button all the same buttons triggers. Reactjs
- Shorthand or sugar for declaring multiple variables with same value?
- How to share same function with multiple react components?
- setState is not working with multiple onClick function
- An issue with creating an onClick effect for individual buttons using react state
- how to have same path for multiple component with react-router
- Dealing with multiple asynchronous function calls in a for loop
- ReactJS Function Component: accordion, allow for multiple selected open with useState
- onClick function for array of buttons not working
- Action and Function onClick with same button
- React: How to render same page that includes multiple components and forms for 2 types of user with different permissions?
More Query from same tag
- How to mock component method using Jest and Enzyme
- Using ReactJS to store array items across multiple pages
- How to set values in a multi-step Formik form with components that implement useField()
- Jest Unit testing onClick event
- In React how to update multiple check box values in to array ?
- React firebase 9 how to delete current user account?
- React/Redux server side rendering initial state
- Why is the account address from metamask coming back as undefined after storing it in useState()
- React: Map over Array of Obects (fake data) to render an Array of words
- JavaScript React Front-End: Opening one collapse button, all collapse buttons open instead of just the one
- Fetch and setInterval react hooks problem
- Dynamically create DOM in ReactJS from json string
- session flush automaically in express-session
- How to implement a retry functionality to Ant Design's Upload Component if uploading a file fails?
- How can I conditionally send props depending on parent element?
- Login Form React JS With Custom Hook
- Custom hook that updates all components that use it in sync
- I have a problem trying to create a react application - Error: Cannot find module './gitignore'
- dynamic form in react how to update nested state field in react.js
- How to replace this componentWillReceiveProps?
- React_Display Image from server side into Client
- React Router multiple params doesn't work
- NextJS: Error serializing `.data.data` returned from `getServerSideProps`
- React Component not rendering on using react router 4
- useContext across files causes circular dependencies
- doSignInWithEmailAndPassword() is missing from firebase.auth()
- NPM and Yarn Registry issues while creating react app
- ReactJS how to set input Textfield to display current Date and time?
- How to add to a parent event handler in React
- Chrome Extension + create-react-app live reload