change parent from children created with map() - arrays

Question

I'm a react and JS newbie trying to create a bookmark-like prototype. The idea was that when user clicks a unique pin, it becomes selected (bookmarked) and the app remembers which ones are bookmarked on multiple screens of the app.
tl:dr
I need my parent component to remember which of the child components are selected
I have a JSON with 600+ entries of the following info:
export const pinData = [
{
"id": "a0b6e",
"name": "share transfer",
"type": "basic",
"isSelected" : false
},
{
"id": "f7m6z",
"name": "commute",
"type": "group",
"isSelected" : false
}
I've used map() to pass JSON data to Pin Class using map()
render() {
return (
<>
<div className="pin-container">
{pinData.map((data, key) => {
return (
<div key={data.id}>
<Pin
// onClick={() => this.handleClick(i)}
// onClick={()=>console.log(this.data.id}
key={data.id}
id={data.id}
name={data.name}
type={data.type}
isSelected={data.isSelected}
index={data.index}
/>
</div>
);
})}
</div>
</>
);
}
and created a shared state in its parent Pins with
export class Pins extends React.Component {
constructor(props) {
super(props);
this.state = {
pins: Array(60).fill(false),
};
}
The issue is that I cannot find a way to pass a function that changes the shared state for a particular index.

Answer 1

Rather than filling an array with false (bad for large sets of data), I'd either create an object that houses which pins have been clicked using the id as the index. IE it is initially empty then {a0b6e: true} after one click, then {b2dk4: true, a0b6e: true} after two clicks. Or you could just have an array of IDs that have been clicked. Or what you are doing will work too.
Anyways, in your parent create a function that accepts an id (or an index in your case).
function pinClicked(index) {
const newPins = [...this.state.pins];
newPins[index] = true;
this.setState({pins: newPins});
}
Then pass this to your child.
render() {
return (
<>
<div className="pin-container">
{pinData.map((data, key) => {
return (
<div key={data.id}>
<Pin
onClick={() => this.handleClick(key)}
key={data.id}
id={data.id}
name={data.name}
type={data.type}
isSelected={data.isSelected}
index={data.index}
/>
</div>
);
})}
</div>
</>
);
}
Where handleClick is the function passed to the child via a prop.
I still recommend using the ids since you have them, but at least in your case the lookup will be fast.