Trying to toggle state but getting a TypeError: drawer.setState is not a function

Question

I have an array of drawer items that I'm trying to toggle the state of. I wrote a function that I thought would work in toggling the individual drawer items but that isn't working. I'm getting a TypeError: drawer.setState is not a function. Not exactly sure how to get that working. Does anyone have any tips on how to do that? Thanks in advance!

class CategoryList extends React.Component<CategoryListProps, CategoryListState> {
  constructor(props) {
    super(props);
    const drawers = this.props.items.map((item) => ({
      open: false,
      heading: item.heading,
      drawerHeading: item.drawerHeading,
      drawerContent: item.drawerContent,
    }));
    this.state = { drawers };
    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle = (drawer) => {
    drawer.setState({ open: !drawer.open });
  };

  render() {
    return (
      <div className="pb-10">
        <h5 className="pb-8 text-white md:text-center">{this.props.heading}</h5>
        <div className="">
          {this.state.drawers.map((drawer) => (
            <div className="flex flex-col items-baseline w-full py-6 text-white border-b md:flex-row border-b-white">
              <h3 className="flex-shrink-0">{drawer.heading}</h3>
              <div className="right">
                <p className="font-serif text-xl">{drawer.drawerHeading}</p>
                {drawer.open && <CategoryListDrawer drawer={drawer} />}
              </div>
              <div className={`flex items-center self-end justify-center w-12 h-12 ml-auto transform border border-white rounded-full toggle-btn cursor-pointer ${drawer.open === true ? 'open' : ''}`} onClick={this.handleToggle(drawer)}>
                <span className="w-6 h-6 overflow-hidden transition-transform duration-75 transform toggle"></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

Answer 1

drawer is an object that looks like this:

{
  open: false,
  heading: item.heading,
  drawerHeading: item.drawerHeading,
  drawerContent: item.drawerContent,
}

It doesn't have a setState function. To set state you'll need to do this.setState. But you also need to modify your code in a few other ways to make it work.

First, you will be updating the entire array, so your code needs to find the item in the array and update just that. Might be easier of you pass an index instead of the drawer, but we can make it work with the drawer:

handleToggle = (drawer) {
  this.setState(prev => {
    const index = prev.drawers.indexOf(drawer);
    const newDrawers = [...prev.drawers];
    newDrawers[index] = {
      ...newDrawers[index],
      open: !newDrawers[index].open
    }
    return { drawers: newDrawers }
  });
}

Second, you're currently calling handleToggle immediately, during rendering, and then passing undefined into onClick. Instead, you need to create a new function and pass that into onClick. Ie, instead of this:

onClick={this.handleToggle(drawer)}

Do this:

onClick={() => this.handleToggle(drawer)}

Third, there's no use in binding an arrow function, so you can delete this line:

this.handleToggle = this.handleToggle.bind(this);