Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

243
Views
Cannot read the property of undefined map
import React from 'react';
import { Card, Text } from "react-native-paper";
import {
  SafeAreaView,
} from "react-native";

class Hnews extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoaded: false,
    };
  }

  // Function to collect data
  async componentDidMount() {
    await fetch(
      "https://hacker-news.firebaseio.com/v0/item/26061935.json?print=pretty"
    )
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          isLoaded: true,
          data: json.data,
          
        });
        console.log("Json", JSON.stringify(json));
      });
  }

    
  render() {
    return (
      <SafeAreaView>
          <Card>
        {this.state.newdata.map((item) => {
         <Text>{item.title}</Text>
  })}
  </Card>
      </SafeAreaView>
    );
  }
}

export default Hnews;

I am doing a hacker news clone, I am fetching the API and showing it but gives the error "Cannot read the property of undefined(reading 'map')". I have seen many answers to this type of question and had changed my solution but nothing works.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

as i can see from this.state.newdata.map((item) you are trying to map , this.state.newdata and if you pay attention you are storing data to newdata state by calling someMethod which you never called within your app , so always the newdata state will be empty, the following should fix it for you:

import React from 'react';
import { Card, Text } from "react-native-paper";
import {
  SafeAreaView,
} from "react-native";

class Hnews extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoaded: false,
    };
  }

  // Function to collect data
  async componentDidMount() {
    await fetch(
      "https://hacker-news.firebaseio.com/v0/item/26061935.json?print=pretty"
    )
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          isLoaded: true,
          data: json.data,
          
        });
        console.log("Json", JSON.stringify(json));
      });
  }

    
  render() {
    return (
      <SafeAreaView>
          <Card>
        {this.state.data.map((item) => {
         <Text>{item.title}</Text>
  })}
  </Card>
      </SafeAreaView>
    );
  }
}

export default Hnews;

and if you pay attention to data you are fetching you will understand that there is no mapable item there , you can only map on kids

enter image description here

about 4 years ago · Juan Pablo Isaza Report

0

Your code snippet seems incomplete. However, your function someMethod is probably the culprit if it is being invoked in your code anywhere.

In it, you set the state’s newdata field to be a string by assigning it the JSON.stringify output. Once it is a string, there is no map function to call on it, which I’m assuming is why you’re getting the undefined error. It needs to be an array of items to use map function.

If you remove newdata altogether and only reference data, it should work, assuming response data is an array.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!