Whenever I try to invoke a function of a component, it seems to be replacing the parameters and passing the props of the first array element instead of the selected one.
To illustrate this issue, let's take a look at some code:
Firstly, here is how I render my list of components:
const HomeSections = () => {
const [state, setState] = useContext(AppContext)
const { HomeSections: SectionData } = state.Something
return (
<aside>
<div>
{SectionData.map(({ title, description, imgUrl, identifier }) => {
return (
<Section
title={title}
description={description}
imgUrl={imgUrl}
key={identifier}
id={identifier}
/>
)
})}
</div>
</aside>
)
}
export default HomeSections;
This is the structure of my component:
const Section = ({ title, description, imgUrl, id }) => {
const [state, setState] = useContext(AppContext)
const { register, setValue } = useForm()
setValue('title', title)
setValue('description', description)
const doSomething = (identifier) => {
// The id is being overwritten by the first element in the array here
}
return (
<div className="SomethingSection__Container">
<input
className="hidden"
type="file"
id="HomeSections__SectionSomething"
onChange={() => doSomething(id)}
/>
</div>
)
}
Section.propTypes = {
title: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
imgUrl: PropTypes.string.isRequired,
}
export default Section;
Every time I select an element from the array (by clicking on the button), the parameter passed to the `doSomething()` function within the component is always the first element instead of the clicked one.
I understand that my code may be confusing, so any assistance would be greatly appreciated!
Thank you!