React JS Hooks with useState call same function but with params - reactjs

Question

I'm finding I'm having to duplicate the same function over again when I could write one function that handles different parameters. I can't get it to work so I wondered if someone could point me in the right direction? Below shows only 2 functions but in reality I've got many that all do the same thing.
import React, {useState} from "react"
const Section = ({ children }) => {
return (
<>
<Wrapper children = {children} />
</>
);
};
const HandlePages = () => {
const [showPageFooDialogue, setShowPageFooDialogue] = useState(false);
const [showPageBarDialogue, setShowPageBarDialogue] = useState(false);
const [currentDialogue, setCurrentDialogue] = useState(0);
{showPageFooDialogue && (
<Section>
<Headers heading = {"Foo Title"} currentDialogue = {currentDialogue} pages = {fooContents.length} />
{fooContents[currentDialogue]}
</Section>
)}
)
{showPageBarDialogue && (
<Section>
<Headers heading = {"Bar Title"} currentDialogue = {currentDialogue} pages = {barContents.length} />
{barContents[currentDialogue]}
</Section>
)}
)
}
const fooContents = [
//Lots of functionality specific to foo listed as the children of this function
];
const barContents = [
//Lots of functionality specific to bar listed as the children of this function
];
return (
<button onClick={() => setShowPageFooDialogue(true)}>Click for Page Foo</button>
<button onClick={() => setShowPageBarDialogue(true)}>Click for Page Bar</button>
)
}
export default HandlePages
Basically where I've got
const [showPageFooDialogue, setShowPageFooDialogue] = useState(false);
const [showPageBarDialogue, setShowPageBarDialogue] = useState(false);
I need just one function such as this but somehow pass 2 parameters to it:
const [showPageGenericDialogue, setShowPageGenericDialogue] = useState(false);
and where I've got:
{showPageFooDialogue && (
<Section>
<Headers heading = {"Foo Title"} currentDialogue = {currentDialogue} pages = {fooContents.length} />
{fooContents[currentDialogue]}
</Section>
)}
)
{showPageBarDialogue && (
<Section>
<Headers heading = {"Bar Title"} currentDialogue = {currentDialogue} pages = {fooContents.length} />
{barContents[currentDialogue]}
</Section>
)}
)
}
I need just one function with 2 parameters for "Foo or Bar Title" (param1) and fooContents or barContents (param2):
{showPageGenericDialogue && (
<Section>
<Headers heading = {param1} currentDialogue = {currentDialogue} pages = {param2.length} />
{param2[currentDialogue]}
</Section>
)}
)
}
And then finally the buttons:
<button onClick={() => setShowPageFooDialogue(true)}>Click for Page Foo</button>
<button onClick={() => setShowPageBarDialogue(true)}>Click for Page Bar</button>
should just pass the parameters something like:
<button onClick={() => setShowPageGenericDialogue(true, fooParam1, fooParam2)}>Click for Page Foo</button>
<button onClick={() => setShowPageGenericDialogue(true, barParam1, barParam2)}>Click for Page Bar</button>
I've looked at various solutions but due to my limitations, I cannot apply them to this.
Any ideas?
Thanks.

Answer 1

You can use reducer:
https://reactjs.org/docs/hooks-reference.html#usereducer
It is a simple example, you can modify as per your needs.
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
Or Take a look at react-redux.
EDIT
If you need functionality like you asked one function with multiple parameter
you can try to give a default state to your useState hook:
const [myFooBar, setFoo] = useState(
{
'foo': false,
'bar': false
}
);
Changing the values:
setFoo(
prevState => ({
...prevState,
'foo': true
})
);
setFoo(
prevState => ({
...prevState,
'bar': true
})
);
Access it like this:
myFooBar.foo
myFooBar.bar