React component doesn't render HTML after submitting checkbox information - html

Question

I am trying to generate some s with some restaurant data based on the information gathered from multiple checkboxed, but for some reason the data is gathered, but the html elements are not generated.
import React, { Component } from "react";
import data from "../../file2.json"
export default class CheckboxList extends Component {
// Selected locations
state = {
locations: [],
// Current restaurants based on selected locations
currentList: []
}
// keeping the selected locations list up to date
onChange = (event) =>{
console.log(event.target.value + " " + event.target.checked);
const isChecked = event.target.checked;
if (isChecked)
{
this.setState({ locations: [...this.state.locations, event.target.value] });
}
else
{
let index = this.state.locations.indexOf(event.target.value);
this.state.locations.splice(index, 1);
this.setState({ locations: this.state.locations });
}
}
// update the restaurant list accord to each filter detail
onClick = (event) =>{
event.preventDefault();
const res = data;
const final = res.filter((value) => this.state.locations.includes(value.restaurant.location.locality));
this.setState({
currentList: [...this.state.currentList, final],
});
}
render() {
const valuesContainer = this.props.valuesContainer;
return (
<div>
<form>
{
valuesContainer.map((element) => (
<div>
<input type="checkbox" name="locations" value={element.restaurant.location.locality} onChange={this.onChange}></input>
<label>{element.restaurant.location.locality}</label>
</div>
))}
<button class="btn btn-primary" type="submit" onClick={this.onClick} value={valuesContainer}>Apply</button>
<div>
{
this.state.currentList.map((element) => (
<div>
{element.restaurant.location.locality}
</div>
))}
</div>
</form>
</div>
);
}
}
An interesting thing is that if I try to print simple text, without fetching data from the list populated by checkboxes, the divs are generated, but when I try to generate them based on the list, nothing is created.
The data set has the following structure:
[
{
"restaurant": {
"R": {
"res_id": 16668008
},
"apikey": "10a35f36f5898432823df42bc743c8aa",
"id": "16668008",
"name": "Arigato Sushi",
"url": "https://www.zomato.com/yorkton-sk/arigato-sushi-yorkton?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1",
"location": {
"address": "14 Second Ave North, Yorkton, SK S3N 1G1",
"locality": "Yorkton",
"city": "Yorkton",
"city_id": 3600,
"latitude": "51.2106824000",
"longitude": "-102.4613173000",
"zipcode": "S3N 1G1",
"country_id": 37,
"locality_verbose": "Yorkton, Yorkton"
},
"switch_to_order_menu": 0,
"cuisines": "Asian",
"average_cost_for_two": 25,
"price_range": 2,
"currency": "$",
"offers": [],
"thumb": "",
"user_rating": {
"aggregate_rating": "3.3",
"rating_text": "Average",
"rating_color": "CDD614",
"votes": "26"
},
"photos_url": "https://www.zomato.com/yorkton-sk/arigato-sushi-yorkton/photos?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1#tabtop",
"menu_url": "https://www.zomato.com/yorkton-sk/arigato-sushi-yorkton/menu?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1&openSwipeBox=menu&showMinimal=1#tabtop",
"featured_image": "",
"has_online_delivery": 0,
"is_delivering_now": 0,
"deeplink": "zomato://restaurant/16668008",
"has_table_booking": 0,
"events_url": "https://www.zomato.com/yorkton-sk/arigato-sushi-yorkton/events#tabtop?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1",
"establishment_types": []
}
},
{
"restaurant": {
"R": {
"res_id": 801690
},
"apikey": "10a35f36f5898432823df42bc743c8aa",
"id": "801690",
"name": "Mocha",
"url": "https://www.zomato.com/lucknow/mocha-gomti-nagar?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1",
"location": {
"address": "CP-1, 2nd Floor, Anand Plaza, Viram Khand-1, Near Patrakarpuram Crossing, Gomti Nagar, Lucknow",
"locality": "Gomti Nagar",
"city": "Lucknow",
"city_id": 8,
"latitude": "26.8528099000",
"longitude": "81.0011849000",
"zipcode": "226010",
"country_id": 1,
"locality_verbose": "Gomti Nagar, Lucknow"
},
"switch_to_order_menu": 0,
"cuisines": "Cafe, Italian, Continental",
"average_cost_for_two": 800,
"price_range": 3,
"currency": "Rs.",
"offers": [],
"thumb": "https://b.zmtcdn.com/data/pictures/0/801690/fa778a9be95f95e7d9846e23b59c8d1a_featured_v2.jpg",
"user_rating": {
"aggregate_rating": "4.6",
"rating_text": "Excellent",
"rating_color": "3F7E00",
"votes": "567"
},
"photos_url": "https://www.zomato.com/lucknow/mocha-gomti-nagar/photos?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1#tabtop",
"menu_url": "https://www.zomato.com/lucknow/mocha-gomti-nagar/menu?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1&openSwipeBox=menu&showMinimal=1#tabtop",
"featured_image": "https://b.zmtcdn.com/data/pictures/0/801690/fa778a9be95f95e7d9846e23b59c8d1a_featured_v2.jpg",
"has_online_delivery": 0,
"is_delivering_now": 0,
"deeplink": "zomato://restaurant/801690",
"has_table_booking": 0,
"events_url": "https://www.zomato.com/lucknow/mocha-gomti-nagar/events#tabtop?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1",
"establishment_types": []
}
},
]