react-state-3.js

import React, {useState} from 'react';

function MyStateComponent = ({ showHeading }) => {
  // Also note, the value we pass to the useState method 
  // will be the default/initial value!
  const [headingText, setHeadingText]  = useState('Default Heading');
  // Our second state variable
  const [paragraphText, setParagraphText] = useState('Default Paragraph');
  
  // Now, update the state depending on some condition!
  if (showHeading) {
    setHeadingText('Show Heading is True!');
  }
  
  // get a random number between 0 - 10
  const randomNumber = Math.floor(Math.random() * 11);
  setParagraphText(`The random number is: ${randomNumber}`);
  
  // Let's keep the heading in a variable to keep it readable
  const heading = showHeading ? <h1>{headingText}</h1> : null;
  
  return <div>
        {heading}
        <p>
          {paragraphText}
        </p>
      </div>;
};