TypeError: this.props.propName.map is not a function react js

Question

I want to fetch JSON data, store it in state and then pass it to component through props. In the component I want to use the map function but it shows me this error : TypeError: this.props.dataQueries.map is not a function. This is my code:

class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        dataQueries: ''
      }
    }

  fetchData() {
    fetch('https://jsonplaceholder.typicode.com/posts', {method: "GET"}).
    then(res => res.json()).
    then(result => this.setState({ dataQueries: result }));
  }

  componentWillMount() {
    this.fetchData();
  }

  render() {
    return (
      <div>
        <ShowPosts dataQueries={ this.state.dataQueries } />
      </div>
    );
  }
}

And this is my component :

class ShowPosts extends Component {
  render() {
    return (
      <div>
      {
      this.props.dataQueries.map((query, index) => {
        return index;
      })
      }
      </div>
    );
  }
}

dataQueries might be a string, if it came from a request. Parse it before considering it as an array. — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Feb 27, 2018 at 12:45
then(result => this.setState({ dataQueries: JSON.parse(result) })); — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Feb 27, 2018 at 12:46
initialize dataQueries as an array [] instead of empty string '' — Rafael Paulino
– Rafael Paulino, Commented Feb 27, 2018 at 12:46
@RajaprabhuAravindasamy: No, that's part of what res.json() does: developer.mozilla.org/en-US/docs/Web/API/Body/json — T.J. Crowder
– T.J. Crowder, Commented Feb 27, 2018 at 13:29
@T.J.Crowder Oh really, I am not aware of that. Thanks for the info though. — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Feb 27, 2018 at 13:30

T.J. Crowder · Accepted Answer · 2018-02-27 12:46:15Z

2

Initially, you're setting dataQueries to ''. Which has no map, as it's a string. It's only an array later, when your fetchData async call has completed. Nothing prevents render from being called before the async call completes.

Initialize it to [] instead, or modify render to avoid trying to use it as an array when it's not an array.

answered Feb 27, 2018 at 12:46

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Falloutcoder · Accepted Answer · 2018-02-27 12:50:28Z

0

You should call this.fetchData() inside componentDidMount() lifecycle method. So when component is mounted only then you update the state with response from API. Also, you should render ShowPosts component when there are posts to render using conditional rendering.

render() {
  return (
    <div>
      {this.state.dataQueries.length && <ShowPosts dataQueries={ this.state.dataQueries } />}
    </div>
  );
}

And your initial dataQueries should be an empty array. dataQueries = []

answered Feb 27, 2018 at 12:50

Falloutcoder

1,0117 silver badges19 bronze badges

2 Comments

Falloutcoder Over a year ago

Avoid introducing any side-effects or subscriptions in this method. For those use cases, use componentDidMount() instead.

is mentioned above provided docs link. Calling an external API and setting a callback is kind of a subscription through promise. So componentWillMount and constructor is recommended when state is being set synchronously which is not the case in this scenario.

T.J. Crowder Over a year ago

@falloutcoder: I didn't think that's what they meant by subscription (and I'm not sure I still don't), but here's an even stronger statement in support of using componentDidMount for ajax: reactjs.org/docs/… Since either way there's going to be an extra render, based on that, I would indeed use componentDidMount instead.

Collectives™ on Stack Overflow

TypeError: this.props.propName.map is not a function react js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related