react usestate with an object code example

Example: simple usestate example

// First: import useState. It's a named export from 'react'
// Or we could skip this step, and write React.useState
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// This component expects 2 props:
//   text - the text to display
//   maxLength - how many characters to show before "read more"
function LessText({ text, maxLength }) {
  // Create a piece of state, and initialize it to `true`
  // `hidden` will hold the current value of the state,
  // and `setHidden` will let us change it
  const [hidden, setHidden] = useState(true);

  // If the text is short enough, just render it
  if (text.length <= maxLength) {
    return {text};
  }

  // Render the text (shortened or full-length) followed by
  // a link to expand/collapse it.
  // When a link is clicked, update the value of `hidden`,
  // which will trigger a re-render
  return (
    
      {hidden ? `${text.substr(0, maxLength).trim()} ...` : text}
      {hidden ? (
         setHidden(false)}> read more
      ) : (
         setHidden(true)}> read less
      )}
    
  );
}

ReactDOM.render(
  ,
  document.querySelector('#root')
);