Please don't do what's written in this article. It's an anti-pattern to set state from props[1]. Consider what happens when a new set of data is passed to this component from above, this component won't get the new set of data and now it's out of sync with the rest of the application.

Another problem with what's written is that there's unnecessary state. In general it's best to figure out the minimal set of state needed to render the UI; everything else should be computed on the fly, directly in the render call (or refactored out into methods).

In this article, data and filteredData as state is unnecessary! The minimal state needed to describe the UI is the text to filter the data and the data itself which is from props. filteredData should be computed, not stored in state.

The text in the input box should always represent the state of the filter text, and the box itself can be used to update this state. This can be achieved with LinkedStateMixin[2].

1. https://facebook.github.io/react/tips/props-in-getInitialSta... 2. https://facebook.github.io/react/docs/two-way-binding-helper...