فیلتر کردن لیست

دوستان سلام. یه پروژه تمرینی todo دارم که یه state بنام todos تعریف کردم، که یه آرایه هست. تمام todoهای من توی این آرایه میرن. سه تا button هم توی صفحه دارم به اسم های Active, All, Completed. وظیفه Active اینه که item هایی که انجام نشده هستن و done: false دارن(done در اینجا نشون میده که کار انجام شده یا نه)، رو در صفحه نشون بده.
وظیفه Completed ، برعکس کار Active هست.
یه state به نام statusDone دارم که درحالت پیشفرض، false هست. با توجه به این، یه متغیر بنام filterTodos ساختم که وظیفه داره todo هایی که doneشون مساوی با statusDone هست رو برگردونه. به این صورت:

let filterTodos = todos.filter(item => item.done === statusDone);

باتوجه به همه اینا، برای نمایش todoها توی صفحه ام، از filterTodos استفاده کردم. به این صورت:

            filterTodos.length == 0 ?
            <p>There isn't any todo</p> :
            filterTodos.map(item => <TodoItem 
              key={item.key}
              text={item.text}
              item={item}
              done={this.toggleTodo.bind(this)}
              />)

TodoItem یه کامپوننته که کدهای آماده یک todo در اون قرار داره.

دکمه های Active و Completed هم که در بالا گفتم، وظیفه تغییر statusDone رو دارن. به این صورت:

          <button onClick={() => this.setState({statusDone : false})} className="filter-btn" type="button">Active</button>
          <button onClick={() => this.setState({statusDone : true})} className="filter-btn" type="button">Completed</button>

حالا سوال من اینه که buttonی که اسمش All بود رو چطور بسازم که هم todoهای انجام شده رو نشون بده و هم todoهای انجام نشده؟
امیدوارم خستتون نکرده باشم!😊
@arian @mohsenbostan @milad @hesammousavi @forughi.vahid @ali.bayat