In ReactJS, rendering breaks after using a child component

Question

This is the App Component:

import React, { Component } from 'react';
import { getMovies } from './Files/FakeMovieAPI';
import ItemsNumbers from './Pagination/ItemsNumber';
import Table from './Pagination/Table';

class App extends Component {
  state = {
    movies: getMovies()
  }
  render() {
    return (
      <div className="App">
        <h2 className="d-inline bg-success"> Motion Pictures Stall </h2>
        <Table movies={this.state.movies} />
        <ItemsNumbers items={this.state.movies} />
      </div>
    );
  }
}

export default App;

The ItemsNumbers Component: I wish to use this component to count the numbers of items in the movies(which is being passed as a props) and return the count.

import React, { Component } from 'react';

class ItemsNumber extends Component {
    state = {
        movies: this.props
    }
    count = 0;
    ItemsCounting = () =>{
        const length = this.state.movies.length()
        console.log(length)
    }

    render(props) {
        return (
            <div>
                {this.ItemsCounting()}
            </div>
        );
    }
}

export default ItemsNumber;

The FakeMovieAPI file:

const Movies = [
  {
    id: 'm7pbc81a',
    title: 'Matrix',
    Year: 1999,
    genre: { id: '193x', name: 'Sci-fi' },
    ratings: 8.7,
    cost: 15
  },
....... 
]
export function getMovies() {
  return Movies;
}

Now the errors I am facing: (passing a link to the screenshot error)

TypeError: this.state.movies.length is not a function
ItemsNumber.ItemsCounting
http://localhost:3000/main.577acc89bd7fb431ffe6.hot-update.js:32:40
this.count = 0;
this.ItemsCounting = () => {
const length = this.state.movies.length();
^
console.log(length);
};
}
View source
ItemsNumber.render
http://localhost:3000/main.577acc89bd7fb431ffe6.hot-update.js:39:22

render(props) {
return /#PURE/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__["jsxDEV"])("div", {
children: this.ItemsCounting()
^
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 15,

Error Screenshot:

Yes it has worked. Thanks to you. Now i am not getting the output in the console. — neel
– neel, Commented Jul 4, 2021 at 6:18
const length = this.state.movies.length() console.log(length) It should return the output — neel
– neel, Commented Jul 4, 2021 at 6:20
console is printing 'hello' but not the length. I think that should work. — neel
– neel, Commented Jul 4, 2021 at 6:22

Andy · Accepted Answer · 2021-07-04 07:04:32Z

1

length is a array property, not a function.

Use

const length = this.state.movies.length;

or use destructuring assignment:

const { length } = this.state.movies;

Additionally ItemsNumber doesn't require its own state. Simply return the length of the array that you pass in as a component property.

Be mindful that when you use a real asynchronous call to an API you'll have to check that the movies array exists first.

class ItemsNumber extends Component {

  render(props) {

    const { length } = this.props.movies;

    if (!length) return <div />;

    return <div>{length}</div>;

  }

}

edited Jul 4, 2021 at 7:04

answered Jul 4, 2021 at 6:36

Andy

63.7k13 gold badges72 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

In ReactJS, rendering breaks after using a child component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related