How do I clear the the array of a state?

Question

So this is my code :

import React from "react";
import Navigation from './Navigation';
import Foot from './Foot';
import MovieCard from './MovieCard';

class Favorites extends React.Component {

render() {
    const { onSearch, favorites, favoriteCallback, totalFavorites, searchKeyUpdate } = this.props;

    return (
        <div>
            <Navigation
                onSearch={onSearch}
                totalFavorites={totalFavorites}
                searchKeyUpdate={searchKeyUpdate} />


            <div className="container">
            <button onClick={()=> this.clearFavorites(favorites)}> Clear all movies </button>
                {(favorites.length < 1) ?
                    <h1 style={{ fontSize: '13px', textAlign: 'center' }}>Please mark some of the movies as favorites!</h1>
                    :
                    <ul
                        className="movies">
                        {favorites
                            .map(movie => (
                                <MovieCard
                                    movie={movie}
                                    key={movie.imdbID}
                                    toggleFavorite={favoriteCallback}
                                    favorites={favorites}
                                />
                            ))}
                    </ul>
                }
                <Foot />
            </div>
        </div>
    );
}


}


const clearFavorites = (favorites) => {
    this.setState({ favorites: [] });

}

The thing I need for the button to do is that when i click it that it clears the whole state of favorites. The clearFavorites function is used to clear everything but when I try this I get an error:

Why doesn't this clear the state of favorites?

Answer 1

As others mentioned, first moving clearFavorites function into Favorites class.

Second, your favorites list is not part of state object, but instead you pull it out from this.props.favorites , so instead of using this.setState , we should just change the props value.

Third, since you're emptying the array, the parameter in your clearFavorites probably not needed? Please refer to below:

First we define a constructor to get the value from props and pass it to state in the constructor as below:

constructor(props) {
  super(props);
  this.state = {favorites: this.props.favorites}
}

clearFavorites = () => {
  this.setState({favorites: []});
};

Then at last in your render method change to following:

const { onSearch, favoriteCallback, totalFavorites, searchKeyUpdate } = this.props;
const favorites = this.state.favorites;// Or in your ul tag, instead of using favorites, change it to this.state.favorites

Answer 2

You have two problems:

• clearFavorites function is not in your class. So you should put it inside.
• You are trying to clear the data inside the favorites array, which is not part of your state, using the function clearFavorites. So, first of all, you should add favorites array to your state and then you can manipulate the information. I suggest you to use the function getDerivedStateFromProps.

Answer 3

You can try to move the clearFavorites into your component

 import React from "react"; import Navigation from "./Navigation"; import Foot from "./Foot"; import MovieCard from "./MovieCard"; class Favorites extends React.Component { render() { const { onSearch, favorites, favoriteCallback, totalFavorites, searchKeyUpdate } = this.props; return ( <div> <Navigation onSearch={onSearch} totalFavorites={totalFavorites} searchKeyUpdate={searchKeyUpdate} /> <div className="container"> <button onClick={() => this.clearFavorites(favorites)}> {" "} Clear all movies{" "} </button> {favorites.length < 1 ? ( <h1 style={{ fontSize: "13px", textAlign: "center" }}> Please mark some of the movies as favorites! </h1> ) : ( <ul className="movies"> {favorites.map(movie => ( <MovieCard movie={movie} key={movie.imdbID} toggleFavorite={favoriteCallback} favorites={favorites} /> ))} </ul> )} <Foot /> </div> </div> ); } clearFavorites = favorites => { this.setState({ favorites: [] }); }; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>