How do i render data from local storage in react typescript?

Question

When I click save I want the data to be displayed onto the browser below my save button, how do I do that? I am using react with a typescript template.

 function ButtonDefaultExample(props: IButtonExampleProps) {
  const { disabled, checked } = props;
  const [showEditor, setShowEditor] = useState(false);
  const [showLesson, setShowLesson] = useState(false);

  return (
    <div style={{width: '80%', margin:'0px auto'}}>
      <h1>Click to create a new course.</h1>
      <Stack horizontal tokens={{childrenGap:10}} horizontalAlign="center" style={{width:'100%'}}>
        <DefaultButton text="Create Course" onClick={()=>setShowLesson(true)} allowDisabledFocus disabled={disabled} checked={checked} />
      </Stack>
      <br><br>
      {
        showLesson && (
          <DefaultButton text="Create Lesson" onClick={()=>setShowEditor(true)} allowDisabledFocus disabled={disabled} checked={checked} style={{alignItems:'center'}} />
        )
      }
      {
        showEditor && (
          <SunEditor onChange={ (content: string) => {
            localStorage.setItem("Contents", content);
          } } />
        )
      }
      <DefaultButton text="Save" onClick={() => localStorage.getItem("Contents") } allowDisabledFocus disabled={disabled} checked={checked} />
    </div>
  );
}

Answer 1

Maybe you can save it in a state and then display it.

Try this

function ButtonDefaultExample(props: IButtonExampleProps){
  const { disabled, checked } = props;
  const [showEditor, setShowEditor] = useState(false);
  const [showLesson, setShowLesson] = useState(false);
  const [showContent, setShowContent] = useState('');

   

  return (
    <div style={{width: '80%', margin:'0px auto'}}>
      <h1>Click to create a new course.</h1>

      <Stack horizontal tokens={{childrenGap:10}} horizontalAlign="center" style={{width:'100%'}}>
        <DefaultButton text="Create Course" onClick={()=>setShowLesson(true)} allowDisabledFocus disabled={disabled} checked={checked} />
      </Stack>
      <br></br>
      {
        showLesson && (
          <DefaultButton text="Create Lesson" onClick={()=>setShowEditor(true)} allowDisabledFocus disabled={disabled} checked={checked} style={{alignItems:'center'}} />
        )
      }
      {
        showEditor && (
          <SunEditor onChange={ (content: string) => {
            localStorage.setItem("Contents", content);
          } } />
        )

      }
     <DefaultButton text="Save" onClick={() => setShowContent(localStorage.getItem("Contents")) } allowDisabledFocus disabled={disabled} checked={checked} />
     {showContent}
    </div>
  );
 }

Answer 2

You probably need to use useEffect which will execute whenever the contents (value) of the editor change:

function ButtonDefaultExample(props: IButtonExampleProps) {
  const { disabled, checked } = props
  const [showEditor, setShowEditor] = React.useState(false)
  const [showLesson, setShowLesson] = React.useState(false)

  const [value, setValue] = React.useState(
    localStorage.getItem('Contents') || ''
  )

  React.useEffect(() => {
    localStorage.setItem('Contents', value)
  }, [value])

  const onChange = (content: string) => {
    setValue(content)
  }

  return (
    <div style={{ width: '80%', margin: '0px auto' }}>
      <h1>Click to create a new course.</h1>
      <Stack
        horizontal
        tokens={{ childrenGap: 10 }}
        horizontalAlign="center"
        style={{ width: '100%' }}
      >
        <DefaultButton
          text="Create Course"
          onClick={() => setShowLesson(true)}
          allowDisabledFocus
          disabled={disabled}
          checked={checked}
        />
      </Stack>
      <br />
      <br />
      {showLesson && (
        <DefaultButton
          text="Create Lesson"
          onClick={() => setShowEditor(true)}
          allowDisabledFocus
          disabled={disabled}
          checked={checked}
          style={{ alignItems: 'center' }}
        />
      )}
      {showEditor && <SunEditor onChange={onChange} />}
      <DefaultButton
        text="Save"
        onClick={() => {/* Do some backend stuff */}}
        allowDisabledFocus
        disabled={disabled}
        checked={checked}
      />
      {value}
    </div>
  )
}