Ad

Set An Array Length Of State To 0, But Binding List Has Still One Element Left

- 1 answer

This TODO list is the third demo from React.js official site,
and I made a extra feature: 'clear all issues'.

It just calls this.setState({ items: [] }),
but there is still one li remain on html page after doing this.

This situation can be reproduced at this jsfiddle: https://jsfiddle.net/ddhp/Lhdo96fw/ , by clicking on clear all.

This is a very simple implementation so I can't figure out the reason.
I have checked this.state.items and it's [].

If someone knows the root cause, It will be very appreciated!
Thanks!

Ad

Answer

The issue is due to your onSubmit method to be called after the clearAll one.

Just add a event.preventDefault(); in your clearAll will prevent your form to be submitted and thus creating an empty element.

Ad
source: stackoverflow.com
Ad