title: In React.JS how does one set the readOnly property on a component that renders a field
body: <p>React.JS provides a variety of mechanisms for implementing components - class-based, components via React.JS hooks, and one can also use <a href="https://styled-components.com/" rel="noreferrer">Styled-Components</a>. In a web application some times one wants to set the <code>readOnly</code> property on an <code>input</code> HTML element. To do so via HTML one uses the <code>readOnly</code> property/attribute on the <code>input</code> HTML element. The confusing thing is that HTML property/attribute has no value:</p>
  
  <pre><code>&lt;!-- Create a readOnly input field to display the username --&gt;
  &lt;input id='username' name='username' value='fred.fish' readOnly /&gt;
  </code></pre>
  
  <p>In React.JS if one is using <a href="https://reactjs.org/docs/introducing-jsx.html" rel="noreferrer">JSX</a> when one defines a component, one can specify properties (<code>props</code>). The value of <code>props</code> are then specified using standard XML attribute/property syntax.</p>
  
  <p>Here is an example of a React.JS Component:</p>
  
  <pre><code>const PageTitleHeading1 = (props) =&gt; {
      const {
          id,
          textLine1,
          textLine2,
          textLine3,
          showCompanyNameLogo
      } = props;
  
      if (id === undefined || id === null || id === '') {
          throw new Error('Bad call to BasePageTitleHeading1. id is required ' +
                          'and must not be undefined, null, or the empty string.');
      }
  
      const pageHeadingLine1 = (textLine1 !== undefined &amp;&amp; textLine1 !== null &amp;&amp;  textLine1 !== '') ?
                               &lt;PageHeadingLine1Style key='1' className='pageHeadingLine1Style'&gt;{textLine1}&lt;/PageHeadingLine1Style&gt; :
                               null;
  
      const pageHeadingLine2 = ((textLine2 !== undefined &amp;&amp; textLine2 !== null &amp;&amp;  textLine2 !== '') || showCompanyNameLogo) ?
                               &lt;PageHeadingLine2 key='2' className='PageHeadingLine2' showCompanNameLogo={showCompanyNameLogo ? true : false} text={(textLine2 !== undefined &amp;&amp; textLine2 !== null) ? textLine2 : ''}/&gt; :
                               null;
  
      const pageHeadingLine3 = (textLine3 !== undefined &amp;&amp; textLine3 !== null &amp;&amp;  textLine3 !== '') ?
                               &lt;PageHeadingLine3Style key='3' className='PageHeadingLine3Style'&gt;{textLine3}&lt;/PageHeadingLine3Style&gt; :
                               null;
  
      return (
          &lt;PageHeading1 id={id} className={`pageHeading1 ${props.className}`}&gt;
              {pageHeadingLine1}
              {pageHeadingLine2}
              {pageHeadingLine3}
          &lt;/PageHeading1&gt;
      );
  }
  </code></pre>
  
  <p>I can the use the component using standard JSX syntax specifying its properties using standard XML attributes/properties:</p>
  
  <pre><code>        &lt;PageTitleHeading1
              id='change-your-password-page-title-heading'
              textLine1='Welcome to the'
              textLine2=' On-Demand Training Platform'
              textLine3='Please change your password'
              showCompanyNameLogo={true}
          /&gt;
  </code></pre>
  
  <p>So what if I want to render a React.JS component that is an <code>input</code> field and set the <code>readOnly</code> attribute/property? This is a little confusing because in HTML the <code>readOnly</code> attribute/property in an <code>input</code> field has no value <code>&lt;input id='username' name='username' value='fred.fish' readOnly /&gt;</code> where in React.JS when one specifies properties/attributes to be used in a component, the properties/attributes have values. So how does one set the <code>readOnly</code> property on a React.JS component that renders an <code>input</code> HTML element/entity?</p>
  
  <p>Here is an example of a component that renders an <code>input</code> field using <a href="https://styled-components.com/" rel="noreferrer">Styled-Components</a>. How does one render a React.JS Component that has the ReadOnly property set on it?</p>
  
  <pre><code>const StyledInputField = styled.input`
      width: ${props.width ? props.width : '100%'};
      height: ${props.height ? props.height : '42px'};
      padding: 10px 10px 10px 10px';
      font-family: Montserrat, sans-serif;
      font-size: 16;
      font-weight: 600;
      text-align: left;
  `
  </code></pre>