How to update child component’s props?

Question

I have some todo list app and it gets data from server.Then i have a search child component that takes his parent's state as it's props and then when you are searching something it filters and updates parent's state passing it's new filtered state.

Until there everything is okay but when i am trying to delete something from that searched list and then i am searching same thing it gives me already deleted note.

Simply i think its not updating search component's props when it's parent's state is already updated after deletion.

How can i solve this?

I am using React JS )

Answer 1

What you need is componentDidUpdate in the SearchBar component :

componentDidUpdate(prevProps) {
    if (this.props.data !== prevProps.data) {
        this.setState({data: this.props.data ,filteredData: this.props.data});
    }
}

A better solution is not to store data as state in SearchBar , juste access it directly from the props