ReactJS TypeError: undefined is not a function (near '...this.state.data.map...')

Question

I am new at React and trying to learn it. I am getting data from API and I will use the data. It returns money rates based on 'USD'. I am gonna use that data for convert money but I am getting this error: Error here

I don't know what the problem is.

import React, { Component } from 'react';
import './App.css';


class App extends Component {

    constructor (props) {
        super(props)
        this.state = {data: 'false'};
    }

    componentDidMount(){
        this.getData();
    }

    getData = () => {
        fetch("https://openexchangerates.org/api/latest.json?app_id=88a3d2b24b174bf5bec485533a3bca88")
            .then(response => {
                if (response.ok) {
                    return response;
                } else {
                    let errorMessage =
                        '${response.status(${response.statusText})',
                  error = new Error(errorMessage);
                  throw(error);
                 }
                })
                .then(response => response.json())
                .then(json =>{
                   console.log(json);
                   this.setState({ data: json.data })
                });
     
    }

  render() {



    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">React App</h1>
        </header>

          {
              this.state.data &&
              this.state.data.map( (item, key) =>
                  <div key={key}>
                      {item}
                  </div>
              )}

      </div>
    );
  }
}

export default App;

Thanks for your time.

initialize state with false not a string 'false' or even better to empty array as @ztadic91 suggested. Since initially this.state.data is truthy, it tries to render before getting the results from getData — cubbuk
– cubbuk, Commented Mar 2, 2018 at 14:16
change this.state = {data: 'false'}; to this.state = {data: []}; — G_S
– G_S, Commented Mar 2, 2018 at 14:16
how does it tries to render before getting the results. i didn't get it. @cubbuk — cagatayyes
– cagatayyes, Commented Mar 2, 2018 at 15:06
On initial render since 'this.state.data' was truthy; second part of the operand && would be executed too. So I guess you assumed that on initial render that part would not be rendered but it renders anyway. — cubbuk
– cubbuk, Commented Mar 2, 2018 at 17:54

ztadic91 · Accepted Answer · 2018-03-02 14:16:11Z

5

Set your initial data property in the state to an empty array []. A stringified 'false' evaluates to true which is why it tries to call the map function, but string doesn't have a map function.

 constructor (props) {
        super(props)
        this.state = {data: []};
    }

Working example here

answered Mar 2, 2018 at 14:16

ztadic91

2,8041 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amanshu Kataria · Accepted Answer · 2018-03-02 14:27:03Z

0

Because this.state.data is not an array, it's a string.

Just use the below code and remove this.state.data && from render method.

constructor (props) {
    super(props)
    this.state = {
        data: []
    };
}

edited Mar 2, 2018 at 14:27

answered Mar 2, 2018 at 14:18

Amanshu Kataria

3,4467 gold badges28 silver badges39 bronze badges

5 Comments

cagatayyes Over a year ago

i removed this.state.data && and i used the code. It's giving the same error. But now its in the JSX

cagatayyes Over a year ago

it's not displaying the json but no errors. so it's not working.

Amanshu Kataria Over a year ago

what error does it give when removing the condition?

cagatayyes Over a year ago

same but the error is here( this.state.data.map( (item, key) => ) now.

Amanshu Kataria Over a year ago

Probably data you're receiving is not an array. It should of the format [{},{},{}].

Collectives™ on Stack Overflow

ReactJS TypeError: undefined is not a function (near '...this.state.data.map...')

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related