Develop Reference

Type Error, cannot read property 'map' of undefined

I'm reading data in from an API and I'm trying to have the elements in the data array show up in a select tag in HTML using React, but it keeps telling me that the data is not an array even though it seems like it is when I do console.log.
render(){
console.log(this.state.countries.Countries)
return(
<div className = "tables-container">
<h1>Tables</h1>
<label>Please Select a Country to view data for: </label>
<select name = "countries" id = "countries">
<option selected = "selected">Select a Country</option>
{
this.state.countries.Countries.map((data)=>(
<option>{data.Country}</option>
))
}
</select>
</div>
)
}
When I run this, it says "TypeError: Cannot read property 'map' of undefined." The console.log result reads
(188) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
so I'm pretty sure this.state.countries.Countries should be an Array, so the map function should work, but it doesn't.
In my constructor I have
this.state = {
countries: [],
}
and I have the API fetch in
componentDidMount(){
fetch("https://api.covid19api.com/summary")
.then((data) => data.json())
.then((data) => {
this.setState({
countries: data
})
})
}
I've been stuck on this for an hour now I really need help figuring it out. Thanks!

this.state = {
countries: [],
}
this.state.countries starts off as an empty array. It has no .Countries property on it, so for your first render, this.state.countries.Countries is undefined, and you can't map undefined.
You need your state to have the same shape before and after you load data. So if you want the .countries.Countries nesting, change your initial state to this:
this.state = {
countries: {
Countries: []
}
}
If you just want one level of nesting, keep your initial values and change the following:
// In componentDidMount
this.setState({
countries: data.Countries
})
// In render
this.state.countries.map(

Conversion of functional components in react into class based component

I have a very basic question I have an array of JSONs and I could easily coopy them in functional component using
const [elements, setElements] = useState([]);
useEffect(() => {
const res = async () => {
const result = await axios.get('/data');
const data = result.data;
setElements(elements => [...elements, ...data]);
};
res();
}, []);
I want to convert them into class based components and when I try to copy in setState I get []. Code is below
import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import Element from './components/Element';
class App extends Component {
constructor(props) {
super(props);
this.state = { elements: [] };
}
componentDidMount() {
const res = async () => {
const result = await axios.get('/data');
const data = result.data;
console.log(data);
this.setState({ elements: data });
};
res();
}
render() {
console.log(this.state.elements);
return (
<div className='wrapper'>
<div id='table'>
{this.state.elements.map(element => (
<Element elements={element} key={element._id} />
))}
</div>
</div>
);
}
}
export default App;
Here is a JSON which I am getting
(119) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

The issue is with how you're trying to set state on your React component, maybe you could try something like the following:
this.setState({ elements: data});
Can you try updating your componentDidMount() to the following:
async componentDidMount() {
const {data} = await Axios.get('/data');
this.setState({ elements: data });
}
Hopefully that helps!

to make code equal it should be written as this
this.setState(state => ({
elements: [...state.elements, ...data]
}));

Mapping something correctly in JSX

I have a json Data which looks like this
0: (963) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
1: (964) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
2: (954) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
where my data looks like this
[0 … 99]
0: {y: 0, x: 10.7279501}
1: {y: 0, x: 10.73239994}
2: {y: 0, x: 10.73684978}
3: {y: 0, x: 10.7413168}
4: {y: 0, x: 10.74576664}
5: {y: 0, x: 10.7502327}
Now, I am trying to use plotly, the plotly documentation for react states just this example
<Plot
data={[
{
x: [1, 2, 3],
y: [2, 6, 3],
type: 'scatter',
mode: 'lines+points',
marker: {color: 'red'},
},
/>
The above just to plot data for single graph, but if I do something like this
<Plot
data={[
{
x: [1, 2, 3],
y: [2, 6, 3],
type: 'scatter',
mode: 'lines+points',
marker: {color: 'red'},
},
{
x: [2, 5, 3],
y: [2, 8, 3],
type: 'scatter',
mode: 'lines+points',
marker: {color: 'red'},
}
]}
/>
I can plot multiple data.
Now, Can someone help me in mapping my data such that I can create multiple graphs?
or the least can someone please help me in figuring out how can I create multiple object inside array using map
{
//data
},
{
//data1
}
I tried this but it didn't work
data={[
this.graphdata.map((data, index) => ({
x: data["x"],
y: data["y"],
type: 'scatter',
mode: 'lines+points',
marker: {color: 'red'},
}))

This is an extended version of J. Hesters solution above.
You must store the new array returned by the .map method in a new variable, let's say, plottableData.
const plottableData = graphdata.map(data => ({
x: data.map(point => point.x),
y: data.map(point => point.y),
type: 'scatter',
mode: 'lines+points',
marker: { color: 'red' },
}));
Then, you can use the plottableData in your code as follows-
<Plot data={plottableData} />
Or
<Plot data={[...plottableData]} />
Hope this will also be helpful!

I assume graphdata equals this:
0: (963) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
1: (964) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
2: (954) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
Then you would have to do:
graphdata.map(data => {
// at this point data equals [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
return {
x: data.map(point => point.x),
y: data.map(point => point.y),
type: 'scatter',
mode: 'lines+points',
marker: {color: 'red'},
}
});

Eventbrite in React

I'm using eventbrite/eventbrite-sdk-javascript for my project. Everything is working fine but the response is giving me back only 50 events
Object
events
:
(50) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
pagination
:
{object_count: 58205, page_number: 1, page_size: 50, page_count: 200, has_more_items: true}
How can I see all events?

The responses when fetching events using eventbrite's api are paginated, with a max of 50 results per page and a max of 200 pages. What you did was fetch the first (let's call it n) page. Now you have to call the api once more, and provide the page=n+1. This will give you the next 50 events.
Hope this helps!

Apply Filter on __ob__: Observer (Typescript)

I want to apply filter like
this.Grid.option("dataSource").filter(x => x.Placeholder != null)
but it is not working
when I do
console.log(this.Grid.option("dataSource"));
I get
(72) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, ob: Observer]
0:
{ob: Observer}
1:
Placeholder
:
(...)
PlaceholderDescr
:
(...)
RecordID
:
(...)
ob
:
Observer {value: {…}, dep: Dep, vmCount: 0}
get Placeholder
:
ƒ reactiveGetter()
set Placeholder
:
ƒ reactiveSetter(newVal)
get PlaceholderDescr
:
ƒ reactiveGetter()
set PlaceholderDescr
:
ƒ reactiveSetter(newVal)
get RecordID
:
ƒ reactiveGetter()
set RecordID
:
ƒ reactiveSetter(newVal)
proto
:
Object
2
:
{ob: Observer}

Get DataSource instance via ds = this.Grid.getDataSource() (documentation)
Then you can filter ds via ds.filter(expr) method. For more information, you can inspect this topic