reveal.jsx

import React, { useState } from 'react';

function App() {
  const [checked, setChecked] = useState(false);
  const [consent, setConsent] = useState('');

  return (
    <div className="App">
      <form>
        <h1>Add new client</h1>
        <fieldset>
          <legend>Has the client been informed how we hold their data and the purposes we use their data for?</legend>
          <input
            type="radio"
            name="consent"
            id="consent_yes"
            value="yes"
            checked={consent === 'yes'}
            onChange={(e) => setConsent(e.target.value)}
            aria-controls="show_consent"
          />
          <label for="consent_yes">Yes</label>
          <input
            type="radio"
            name="consent"
            id="consent_unnamed"
            value="unnamed"
            checked={consent === 'unnamed'}
            onChange={(e) => setConsent(e.target.value)}
            aria-controls="show_consent"
          />
          <label for="consent_unnamed">Unnamed</label>
          <input
            type="radio"
            name="consent"
            id="consent_no"
            value="no"
            checked={consent === 'no'}
            onChange={(e) => setConsent(e.target.value)}
            aria-controls="show_consent"
          />
          <label for="consent_no">No</label>
        </fieldset>

        <div id="show_consent" aria-live="polite">
          {consent === 'yes' && (
            <>
              <div>
                <h2>Yes, the client has been informed</h2>
                <p>By ticking the following boxes you are confirming the specific consents and authority the client is giving at this time</p>
              </div>
              <div>
                <h2>New client</h2>
              </div>
            </>
          )}

          {consent === 'unnamed' && (
            <div>
              <h2>Yes, but unnamed, the client has been informed</h2>
              <p>By ticking the following boxes you are confirming the specific consents and authority the client is giving at this time</p>
            </div>
          )}

          {consent === 'no' && (
            <div>
              <h2>No, the client has not been informed</h2>
              <p>The client has been informed how we hold their data and the purposes we use their data for. </p>
            </div>
          )}
        </div>
        <button type="submit">Submit</button>
        <a href="/blah">Cancel</a>
      </form>      
    </div>
  );
}

export default App;