1

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

screenshot

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.

5
  • You should try to console log this.state Commented Mar 2, 2018 at 14:16
  • 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
    Commented Mar 2, 2018 at 14:16
  • change this.state = {data: 'false'}; to this.state = {data: []};
    – 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
    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
    Commented Mar 2, 2018 at 17:54

2 Answers 2

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

0
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: []
    };
}
5
  • i removed this.state.data && and i used the code. It's giving the same error. But now its in the JSX
    – cagatayyes
    Commented Mar 2, 2018 at 14:51
  • it's not displaying the json but no errors. so it's not working.
    – cagatayyes
    Commented Mar 2, 2018 at 14:56
  • what error does it give when removing the condition? Commented Mar 2, 2018 at 14:56
  • same but the error is here( this.state.data.map( (item, key) => ) now.
    – cagatayyes
    Commented Mar 2, 2018 at 14:59
  • Probably data you're receiving is not an array. It should of the format [{},{},{}]. Commented Mar 2, 2018 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.