/thp_next_24

Primary LanguageJavaScript

Julie Keep

20200507 Julie Kwok

run npm install then npm start to see the result

Uncomment index.jsx to inject some notes into browser or clear storage

Page behaviour

  • can see a list of notes on the left, with long notes chopped
  • can click on any note to see complete detail on the right, over flow is visible in scroll (just....don't click on any markdown text on the left yet...Normally works best when clicking between the title and its content)
  • can click on new and write a new post and submit to save
  • can type in markdown and see live html effect
  • on submit, list on the left update automatically, last creation on top
  • modify an existing note

Difficulties

  1. Are we sure that event handling(with arguments other than e ) only pass from parent to child ? Not with one level in the middle?
  • Saw something from Hadrien and Carolin which might have helped:
  • In parent, `<MarkdownInput triggerSetNote={(input) => setNote(input)}/>
  • In child, const handleClick = (e) => { e.preventDefault(); triggerSetNote(input); };

  1. How to remove the blue outline on a button when it is clicked ?

  2. How to not trigger overflow: scroll; when there is no overflow yet ?

  • well, use overflow: auto instead

Unfortunate discoveries (or not)

  1. useState takes the default value as its argument. It will be set only on the first render and will not update when props change --- cited fromhere

  2. key attribute changing forces a component to remount.