Error on mapping an array of objects in react application

Question

I am trying to map an array i.e static json data . Unable to map as I am getting error as this.props.movies.map is not a function. Below is the code for Table component with App.js. as the object in json file is movies.as I followed the same step on fetching api but was able to get data

import data from '../src/data.json'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      movies: data,
    }
  }

  render() {
    return (
      <div className="App">
        <Header />
        <Table movies={this.state.movies} />
      </div>
    );
  }
}

Table.js

import React, { Component } from 'react';
import './Table.css';
import { list } from 'postcss';

class Table extends Component {
    constructor(props) {
        super(props);
        this.state = { }
    }

    render() {
        const list = this.props.movies.map((movie) => (   
                <tr key={movie.Title}>
                    <td>{movie.Title}</td>
                    <td>{movie.Director}</td>
                </tr>
            )
         );

        return (
            <div className="table">
                table
               <table>
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Director</th>
                        </tr>
                    </thead>
                    <tbody>
                        {list}
                    </tbody>
                </table>

            </div>
        );
    }
}

export default Table;

What is the data? Without knowing the data how can you expect us to help you. Please share the data — Hemadri Dasari
– Hemadri Dasari, Commented Aug 25, 2018 at 7:57
Its a json file like this { "movies": [ { "Title": "Django Unchained", "Year": "2012", "Rated": "UNRATED", "Released": "25 Dec 2012", — Abhishek Konnur
– Abhishek Konnur, Commented Aug 25, 2018 at 7:59
So you have to assign data.movies in the state like following this.state = { movies: data.movies, } — Hemadri Dasari
– Hemadri Dasari, Commented Aug 25, 2018 at 8:03
If your root key is "movies", then it should be this.state.movies.movies(data.movies). Am I right? — Meet Zaveri
– Meet Zaveri, Commented Aug 25, 2018 at 8:05

Hemadri Dasari · Accepted Answer · 2018-08-25 08:06:40Z

1

The issue is your data contains movies array. So you need to assign data.movies to movies when you are initializing the state. Check below one for better understanding

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      movies: data.movies,
    }
  }

  render() {
    const { movies } = this.state;
    return (
      <div className="App">
        <Header />
        {movies.length === 0 ? <h1>Loading Movies</h1> : <Table movies={this.state.movies} />}
      </div>
    );
  }
}

answered Aug 25, 2018 at 8:06

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

3 Comments

Abhishek Konnur Over a year ago

Why is const { movies } = this.state; required inside render

Hemadri Dasari Over a year ago

You can also directly access like this.state.movies but having const { movies } = this.state meaning helps reusability you no need to call this.state.movies every time and this is part of ES6. It works the same way for props as well like for eg const { data } = this.props;

Hemadri Dasari Over a year ago

Also kindly upvote my answer if it resolves your issue.

Collectives™ on Stack Overflow

Error on mapping an array of objects in react application

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related