react-state-2.js

import React, {useState} from 'react';

function MyStateComponent = ({ showHeading }) => {
  // useState always returns two items:
  // 1. headingText - the value of our state variable
  // 2. setHeadingText - the setter for our state variable
  const [headingText, setHeadingText]  = useState('Default Heading');
  
  // Now, update the state depending on some condition!
  if (showHeading) {
    setHeadingText('Show Heading is True!');
  }
  
  return showHeading ? <h1>{headingText}</h1> : null;
};