score:-1
you can make the usehookone return a function that takes two arguments accountid and statementid .
const sethookone = usehookone()
const sethooktwo = usehooktwo()
const sethookthree = usehookthree()
if (producttype === 'sometype') {
return sethookone(accountid, statementid)
}else if (producttype === 'othertype') {
return sethooktwo(accountid, statementid)
} else {
return sethookthree(accountid, statementid)
}
score:1
hooks can't be called into function or conditions
use hook in the root and put condition for each hook.
can you predict the purpose of your code? i think the logical design of the code should just be approached from a different angle
edit with exemple:
// this hook comes from react-router dom to get the url params
const param = const { producttype, accountid, statementid } = useparams();
let apirequest = new productrequestapi();
if(prodtype == "firsttype"){
apiquest.adress = 'adress.api.com';
apiquest.quest: 'firstrequest';
apiquest.accountid ... etc
}
else if(prodtype == "secondtype"){
...
}
singlehook(apirequest){
//call api with good params and return after
}
score:3
you need to create 3 others components for each scenario. in each component, you can add his own logic.
const param = const { producttype, accountid, statementid } = useparams();
// i need to run a hook that calls a different api according producttype value
if (producttype === 'sometype') {
return <usehookone accountid={accountid} statementid={statementid} />
} else if (producttype === 'othertype') {
return <usehooktwo accountid={accountid} statementid={statementid} />
} else {
return <usehookthree accountid={accountid} statementid={statementid} />
}
and then create 3 new components. example with usehookone
import react from 'react'
const usehookone = (props) => {
const data = usehookone(props.accountid, props.statementid)
return (<>yay! logic number 1 based on {data}</>)
}
export default usehookone
Source: stackoverflow.com
Related Query
- There is a way to call hooks conditionally in React?
- Is there any way to see names of 'fields' in React multiple state with React DevTools when using 'useState' hooks
- Way to call hooks from button events in react
- call custom hooks conditionally react
- Is there a clean way to conditionally load and render different components for the same React Router route?
- Is there such a thing as a "correct" way of defining state with React hooks and Typescript?
- When testing a React component, is there any way to directly call its non-lifecycle methods?
- Is there cleaner way to define React Hooks useState on the top level?
- Is there a better way to conditionally render these BE responses on the FE? using react
- Is there a way of passing state information from react hooks into nested functions in react?
- Is there any better way to set function to react hooks useState?
- Is there any way to define the datatype of value in state of hooks in functional component of react JS?
- Is there a way to do an api call only once in react functional component?
- Is there a way to emulate the run frequency of constructor code using the React Hooks API?
- Is there a good way to use React hooks inside a callback or render prop?
- Is there a way to conditionally render content using onClick in react JS?
- Is there a better way to organize this React page with an async call to the API?
- Is there a way to conditionally import multiple react imports?
- Infinite loop in React GET API call and correct way to use Hooks and useState()
- Is there any alternative way to call a react hook conditionally?
- React Hooks : Conditionally call another custom hook
- Is there a way in React to call a bracket function which changes state, inside other function?
- Is there any way to Call a Component on button Click in React JS?
- correct way to call GraphQL mutation from react using hooks
- Is there any way in React Hooks we can changes the value of input tag on the click of onClick Function
- is there a way to call another action from one action in react redux
- React hooks - right way to clear timeouts and intervals
- what is right way to do API call in react js?
- Is there a way to check if the react component is unmounted?
- Is there a way to render multiple React components in the React.render() function?
More Query from same tag
- What is the difference "setter of React.useState" and "this.setState" during update of state
- value not being updated after saga call react-redux
- TypeError: ecwidData.map is not a function
- Password is gone when logging in a firebase account that was created using Email and Password
- Type 'number' is not assignable to type 'string | undefined'
- "ReactJs" reset the State but not the unique id
- React element not expanding correctly in CSS Flex container
- Button with copyable link
- How to test button that on click renders html element within the same component in React testing library, Jest?
- How to insert data from a React form to mysql?
- How to set a base url for react-router at the app level?
- Value of useState not set on initial render
- Can I use both ES6 and ES5 in the same React codebase?
- click function in react was calling more than once even and there is no strict mode used in index files
- How can I dynamically rerender my api to my webpage?
- How to get complete response data based on text field entry Reactjs
- Redux : reset 1 variable to initial state in Redux
- How to set array name in json using reactjs
- React TS useContext and UseReducer with axios
- How to show in a list, visible markers in the google map with React
- Uncaught type error: cannot read property persist of undefined with react-bootstrap carousel
- How do I 'cast' someting in TypeScript?
- material ui modal slow and even crash
- How to make a loading animation that shows up when you click on a button? It should take up the full screen & should be from right to left & disappear
- Yup image validation, only if image is uploaded
- How to make a webworker use the same typescript code as the app?
- react-grid layout html not updating cols
- How to mount a component on click?
- Pickers Material ui, error displayed ONLY in english language
- react-router v6: Navigate to a URL with searchParams