title: How would I build the logic for a web app that has a writing area, notes area, and note category area?
body: <p>I know this is a broad question, but I am getting confused thinking about writing the logic to all of this. I have 3 main areas in the app and they are: write area, notes area, and note category area.</p>
  
  <pre><code>|         | [][] | notecatagory
  |Writearea| [][] | +
  |         | [][] |
  </code></pre>
  
  <p>The notes category is a a list where a user can add a new catagory which would give them a blank slate of notes that they can fill out. 
  The write area never changes. 
  So each note category needs to know what data is inside each of the notes, and when a user adds another note catagory, they get a new page of notes, but the data for the other category is still there. When a user clicks on one note category, it shows the notes for that category and so on. </p>
  
  <p>My question is on how to store the variables and states for that. My initial thought was to have a state1 that holds the data for all of the notes, then the user clicks on another category, and it adds a state2 with blank notes. I was thinking each note has a value={this.state.note1.value} that get set when I call onKeyDown={updateNoteData}.</p>
  
  <pre><code>&lt;input className="note1data" value={this.state.note1.value} onKeyDown= 
  {updateNoteData} /&gt;
  
  updateNoteData(event){
    this.setState({note1: event.target.value });
  }
  </code></pre>
  
  <p>My overall problem is: when a user clicks on a new category, how do I handle that? Do I make a state with an array of note variables in it? Something like this?</p>
  
  <pre><code>this.state = {note1data: [note1:'', note2:'', note3:'', note4:'']}
  </code></pre>
  
  <p>So that maybe this way when the user adds a new catagory I can add it as
  note2data?</p>