React how to make children components have their own state - reactjs

Question

class States extends Component {
componentDidMount() {
this.props.getForSaleStates()
}
render() {
return (
<div>
{this.props.post.states.map((eachState, index) => (
<State key={index} eachState={eachState} />
))}
</div>
)
}
}
const mapStateToProps = state => ({
post: state.post,
auth: state.form
})
export default connect(mapStateToProps, {
getForSaleStates
})(States)
class State extends Component {
state = {
isOpen: false,
cities: []
}
componentDidUpdate(prevProps) {
if (this.props.post.cities !== prevProps.post.cities) {
this.setState({
cities: this.props.post.cities
})
}
}
handleClick = (e) => {
if (!this.state.isOpen) {
this.props.getForSaleTowns(this.props.eachState)
}
this.setState({
isOpen: !this.state.isOpen
})
}
render() {
console.log(this.state)
return (
<div>
<ListGroupItem
style={{ fontSize: '12px' }} className='p-0 border-0'
tag="a" href="#"
onClick={this.handleClick}>
{!this.state.isOpen ? (
<i className="far fa-plus-square mr-1" style={{ fontSize: '1em' }}>
</i>
) : (
<i className="far fa-minus-square mr-1" style={{ fontSize: '1em' }}>
</i>
)}
{this.props.eachState}
</ListGroupItem>
<Collapse isOpen={this.state.isOpen}>
<Cities cities={this.state.cities} />
</Collapse>
</div>
)
}
}
const mapStateToProps = state => ({
post: state.post,
auth: state.form
})
export default connect(mapStateToProps, { getForSaleTowns })(State)
class Cities extends Component {
render() {
// console.log(this.props)
return (
<div>
<ListGroup >
{this.props.cities.map((city, index) => (
<ListGroupItem key={index} style={{ fontSize: '11px' }} className='border-0' tag="a" href="#">
{city}
</ListGroupItem>
))}
</ListGroup>
</div>
)
}
}
const mapStateToProps = state => ({
post: state.post,
auth: state.form
})
export default connect(mapStateToProps)(Cities)
Explanation: States => State => Cities
Getting all the states from database, mapping them out to have each other their own state, then calling towns in that state by sending another action to redux and getting towns in that specific state.
the above code works fine, only thing is when i click on one state collapse opens up and show towns from that state. however if i click on another state, towns from redux changes and therefore the list above changes.
here is a photo that explains what I mean:
How Can i make it so every state has its own cities listed instead of they all becoming the same

Answer 1

componentDidUpdate(prevProps) {
if (this.props.post[state_id].cities !== prevProps.post[state_id].cities) {
this.setState({
cities: this.props.post.cities
})
}
}
post Reducer
export const postReducer = (state, action) => {
[...Old code]
case [TOWN_FETCH_SUCCESS]:
return {
...state,
// your unique identifier for each state
[state_id]: action.payload
}
}
While saving you can save towns inside that id of the state