okay, this one's causing me problems - might be that this isn't something you can do in react but I hope you can.
I have a list of venues returned from an api which are mapped to an arrayin my parent component's state:
this.state = {
venues : []
}
As well as mapping the venue name, id, etc, an additional property of 'selected' is mapped with a boolean set to false.
This functionality works fine.
this.state.venues is then sent as a prop to a child component, "Venues", which maps each set of venue data to an instance of a grand child component called "VenueItems", so for example, if it returns four venues, we end up with four instances of VenueItems.js each containing the name, the id, a description and the 'selected' property, still set to false.
"VenueItems" additionally contains a clickable element and a click handler which returns the specific data associated with that particular venue object / instance back up to the parent component, App.js. This functionality works fine as well.
When it gets back to the parent component I want to alter the 'selected' property of that specific venue to true (the idea is that more details will then be rendered specific to that venue)... this is where I'm running into problems. I've referred to the answer at: How to update a nested state in React which is great but doesn't allow for havign an array bang in the middle of your object(!)
the best I've been able to come up with thus far (in the parent component) is this - where 'venue' is the data returned for the specific venue by the click handler:
populateSelectedVenue = (venue) => {
this.state.venues.forEach(item => {
` this.setState(prevState => ({
...prevState,
venues: {
...prevState.venues,
item: {
...prevState.venues.item.selected: false
}
}
})`
});
}
...but this isn't getting me anywhere. More annoyingly, it's not throwing any obvious console.errors which I can work with - it's just not populating the 'selected' property. My suspicion is that 'item' isnt being accepted as part of the tree but I don't know how to get round this... any ideas folks? Thanks in advance.
The 'venues' parameter is the data from the venue that's been clicked on. in some way that's going to be used to identify which instance should have selected added to it.
* in a nutshell, the question here is how do you iterate through an array nested in this.state and change one of the properties in one of the iterations *
