React Advanced Practice - Building a Survey Application

Welcome to this comprehensive tutorial on building a React Survey Application! This guide will walk you through creating a multi-page survey application using React and React Router, complete with form validation, state management, and dynamic rendering.

In this tutorial, we'll use George Polya's 4-step problem-solving method to tackle this challenge:

  1. Understand the Problem - Analyze the requirements and specifications
  2. Devise a Plan - Create a whiteboard plan and architecture
  3. Execute the Plan - Implement the solution step by step
  4. Review/Extend - Test, refine, and enhance the solution

Step 1: Understand the Problem

Let's analyze what our application needs to accomplish based on the specifications:

Key Requirements

Technologies We'll Need

Step 2: Devise a Plan

Whiteboard Plan

  1. Set up project structure using create-react-app
  2. Create component hierarchy
    • App (main container)
    • Navigation
    • Home
    • SampleSurvey
    • SPISurvey
    • SPIReport
    • FormComponents (reusable form elements)
  3. Set up routing for navigation between pages
  4. Create context for sharing state between SPISurvey and SPIReport
  5. Implement form validation logic
  6. Add result processing for the SPI survey

Project Structure

src/
├── App.js               # Main component with routing
├── index.js             # Entry point
├── components/
│   ├── Navigation.js    # Navigation bar
│   ├── Home.js          # Home page
│   ├── SampleSurvey.js  # Sample survey form
│   ├── SPISurvey.js     # Sensory Preferences survey
│   ├── SPIReport.js     # Results page for SPI
│   └── FormComponents/  # Reusable form components
│       ├── MultipleChoice.js
│       ├── TextInput.js
│       ├── TextArea.js
│       └── LikertScale.js
├── contexts/
│   └── SPIContext.js    # Context for SPI results
└── data/                # Survey data
    ├── sample.json
    ├── spi.json
    └── bonus.json

Step 3: Execute the Plan

Setting Up the Project

First, let's create our React application:

npx create-react-app survey-app
cd survey-app
npm install react-router-dom@5.3.0

We're using React Router 5 as specified in the original requirements.

Creating the Basic App Structure

Let's start with our App.js file that will handle routing:

src/App.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import SampleSurvey from './components/SampleSurvey';
import SPISurvey from './components/SPISurvey';
import SPIReport from './components/SPIReport';
import { SPIProvider } from './contexts/SPIContext';

function App() {
  return (
    <Router>
      <div className="App">
        <Navigation />
        <div className="container">
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/sample" component={SampleSurvey} />
            <SPIProvider>
              <Route path="/spi" component={SPISurvey} />
              <Route path="/spi-report" component={SPIReport} />
            </SPIProvider>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;

Creating the SPI Context

We'll need a context to share SPI survey answers between components:

src/contexts/SPIContext.js

import React, { createContext, useState } from 'react';

// Create a context for SPI data
export const SPIContext = createContext();

export const SPIProvider = ({ children }) => {
  // State to hold answers and results
  const [answers, setAnswers] = useState({});
  const [results, setResults] = useState(null);

  // Calculate results based on answers
  const calculateResults = () => {
    // Initialize scores for each category
    const scores = {
      visual: 0,      // Questions 1, 4, 7, 10, 13
      auditory: 0,    // Questions 2, 5, 8, 11, 14
      kinesthetic: 0  // Questions 3, 6, 9, 12, 15
    };

    // Add up points for each category
    for (let i = 1; i <= 15; i++) {
      const answer = parseInt(answers[`q${i}`] || 0);
      
      if (i % 3 === 1) {
        scores.visual += answer;
      } else if (i % 3 === 2) {
        scores.auditory += answer;
      } else {
        scores.kinesthetic += answer;
      }
    }

    // Calculate total points
    const totalPoints = scores.visual + scores.auditory + scores.kinesthetic;
    
    // Calculate percentages
    const results = {
      visual: Math.round((scores.visual / totalPoints) * 100),
      auditory: Math.round((scores.auditory / totalPoints) * 100),
      kinesthetic: Math.round((scores.kinesthetic / totalPoints) * 100)
    };

    // Sort the results by percentage (highest first)
    const sortedResults = Object.entries(results)
      .sort((a, b) => b[1] - a[1])
      .map(([type, percent]) => ({ type, percent }));

    setResults(sortedResults);
    return sortedResults;
  };

  return (
    <SPIContext.Provider value={{ answers, setAnswers, results, setResults, calculateResults }}>
      {children}
    </SPIContext.Provider>
  );
};

Creating Navigation

Now let's create the navigation component:

src/components/Navigation.js

import React from 'react';
import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav className="main-nav">
      <div className="logo">
        <img src="/images/logo.png" alt="a/A Forms Logo" />
      </div>
      <ul className="nav-links">
        <li><NavLink exact to="/">Home</NavLink></li>
        <li><NavLink to="/sample">Sample Survey</NavLink></li>
        <li><NavLink to="/spi">Sensory Preferences</NavLink></li>
      </ul>
    </nav>
  );
}

export default Navigation;

Creating the Home Page

Let's implement a simple home page based on the wireframe description:

src/components/Home.js

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <div className="home-page">
      <h1>Welcome to a/A Forms</h1>
      
      <div className="intro-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
        
        <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.</p>
      </div>
      
      <div className="survey-cards">
        <div className="card">
          <h3>Sample Survey</h3>
          <p>Explore different question types and features.</p>
          <Link to="/sample" className="btn">Take Survey</Link>
        </div>
        
        <div className="card">
          <h3>Sensory Preferences Inventory</h3>
          <p>Discover your learning style preferences.</p>
          <Link to="/spi" className="btn">Take Survey</Link>
        </div>
      </div>
    </div>
  );
}

export default Home;

Creating Form Components

Next, let's create reusable form components for different question types:

src/components/FormComponents/MultipleChoice.js

import React from 'react';

function MultipleChoice({ question, onChange, value, error }) {
  const handleChange = (e) => {
    onChange(question.stem, e.target.value);
  };

  // Check if this question includes an "Other" option
  const includeOther = question.includeOther;
  
  return (
    <div className="question multiple-choice">
      <h4>{question.stem}</h4>
      {error && <p className="error">{error}</p>}
      
      {question.options.map((option) => (
        <div className="option" key={option.value}>
          <input
            type="radio"
            id={`option-${option.value}`}
            name={question.stem}
            value={option.value}
            checked={value === option.value.toString()}
            onChange={handleChange}
          />
          <label htmlFor={`option-${option.value}`}>{option.text}</label>
        </div>
      ))}
      
      {includeOther && (
        <div className="option">
          <input
            type="radio"
            id="option-other"
            name={question.stem}
            value="other"
            checked={value === "other"}
            onChange={handleChange}
          />
          <label htmlFor="option-other">Other</label>
          {value === "other" && (
            <input
              type="text"
              className="other-text"
              placeholder="Please specify"
              onChange={(e) => onChange(question.stem + "-other", e.target.value)}
            />
          )}
        </div>
      )}
    </div>
  );
}

export default MultipleChoice;

src/components/FormComponents/TextInput.js

import React from 'react';

function TextInput({ question, onChange, value, error }) {
  const handleChange = (e) => {
    onChange(question.stem, e.target.value);
  };

  // Determine input type (password for employee number)
  const isPassword = question.stem && question.stem.toLowerCase().includes('employee number');
  const inputType = isPassword ? 'password' : 'text';
  
  // Determine width class based on size property
  let sizeClass = 'full-width';
  if (question.size === 'narrow') {
    sizeClass = 'narrow-width';
  } else if (question.size === 'wide') {
    sizeClass = 'wide-width';
  } else if (question.size === 'moderate') {
    sizeClass = 'moderate-width';
  }

  return (
    <div className="question text-input">
      <label htmlFor={`input-${question.stem}`}>{question.stem}</label>
      {error && <p className="error">{error}</p>}
      
      <input
        type={inputType}
        id={`input-${question.stem}`}
        value={value || ''}
        onChange={handleChange}
        className={sizeClass}
        maxLength={question.charlimit}
      />
    </div>
  );
}

export default TextInput;

src/components/FormComponents/TextArea.js

import React from 'react';

function TextArea({ question, onChange, value, error }) {
  const handleChange = (e) => {
    onChange(question.stem, e.target.value);
  };
  
  // Determine width class based on size property
  let sizeClass = 'full-width';
  if (question.size === 'narrow') {
    sizeClass = 'narrow-width';
  } else if (question.size === 'wide') {
    sizeClass = 'wide-width';
  } else if (question.size === 'moderate') {
    sizeClass = 'moderate-width';
  }

  return (
    <div className="question text-area">
      <label htmlFor={`textarea-${question.stem}`}>{question.stem}</label>
      {error && <p className="error">{error}</p>}
      
      <textarea
        id={`textarea-${question.stem}`}
        value={value || ''}
        onChange={handleChange}
        className={sizeClass}
        rows={question.lines}
        maxLength={question.charlimit}
      />
    </div>
  );
}

export default TextArea;

src/components/FormComponents/LikertScale.js

import React from 'react';

function LikertScale({ question, onChange, value }) {
  const handleChange = (e) => {
    onChange(question.code, parseInt(e.target.value));
  };

  // Determine which scale options to use
  const getScaleOptions = () => {
    switch (question.scale) {
      case 'Agreement':
        return [
          { value: 1, label: 'Strongly Disagree' },
          { value: 2, label: 'Disagree' },
          { value: 3, label: 'Neutral' },
          { value: 4, label: 'Agree' },
          { value: 5, label: 'Strongly Agree' }
        ];
      case 'Satisfaction':
        return [
          { value: 1, label: 'Very Dissatisfied' },
          { value: 2, label: 'Dissatisfied' },
          { value: 3, label: 'Neutral' },
          { value: 4, label: 'Satisfied' },
          { value: 5, label: 'Very Satisfied' }
        ];
      case 'Frequency':
        return [
          { value: 1, label: 'Never' },
          { value: 2, label: 'Rarely' },
          { value: 3, label: 'Sometimes' },
          { value: 4, label: 'Often' },
          { value: 5, label: 'Always' }
        ];
      case 'Confidence':
        return [
          { value: 1, label: 'Not at all Confident' },
          { value: 2, label: 'Slightly Confident' },
          { value: 3, label: 'Moderately Confident' },
          { value: 4, label: 'Very Confident' },
          { value: 5, label: 'Extremely Confident' }
        ];
      default:
        return [
          { value: 1, label: 'Strongly Disagree' },
          { value: 2, label: 'Disagree' },
          { value: 3, label: 'Neutral' },
          { value: 4, label: 'Agree' },
          { value: 5, label: 'Strongly Agree' }
        ];
    }
  };

  const scaleOptions = getScaleOptions();
  
  return (
    <div className="question likert-scale">
      <h4 dangerouslySetInnerHTML={{ __html: question.stem }} />
      
      <div className="likert-options">
        {scaleOptions.map((option) => (
          <div className="likert-option" key={option.value}>
            <input
              type="radio"
              id={`${question.code}-${option.value}`}
              name={question.code}
              value={option.value}
              checked={value === option.value}
              onChange={handleChange}
            />
            <label htmlFor={`${question.code}-${option.value}`}>{option.label}</label>
          </div>
        ))}
        
        {question.includeNA && (
          <div className="likert-option">
            <input
              type="radio"
              id={`${question.code}-na`}
              name={question.code}
              value="0"
              checked={value === 0}
              onChange={handleChange}
            />
            <label htmlFor={`${question.code}-na`}>N/A</label>
          </div>
        )}
      </div>
    </div>
  );
}

export default LikertScale;

Creating the Sample Survey

Now, let's implement the Sample Survey with validation:

src/components/SampleSurvey.js

import React, { useState } from 'react';
import MultipleChoice from './FormComponents/MultipleChoice';
import TextInput from './FormComponents/TextInput';
import TextArea from './FormComponents/TextArea';
import sampleData from '../data/sample.json';

function SampleSurvey() {
  // State for form data, errors, and submission status
  const [formData, setFormData] = useState({});
  const [errors, setErrors] = useState({});
  const [isSubmitted, setIsSubmitted] = useState(false);

  // Handle change in form fields
  const handleChange = (fieldName, value) => {
    setFormData({
      ...formData,
      [fieldName]: value
    });
    
    // Clear any existing error for this field
    if (errors[fieldName]) {
      setErrors({
        ...errors,
        [fieldName]: null
      });
    }
  };

  // Validate the form
  const validateForm = () => {
    const newErrors = {};
    let isValid = true;

    // Check required fields
    sampleData.questions.forEach(question => {
      // Skip optional fields and section headers
      if (question.optional || question.type === 'section') {
        return;
      }

      // Check if field has a value
      if (!formData[question.stem] || formData[question.stem].trim() === '') {
        newErrors[question.stem] = 'This field is required';
        isValid = false;
      }
    });

    setErrors(newErrors);
    return isValid;
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (validateForm()) {
      // Form is valid, show thank you message
      setIsSubmitted(true);
      
      // You could also send the data to a server here
      console.log('Form submitted:', formData);
    }
  };

  // Render different question types
  const renderQuestion = (question, index) => {
    switch (question.type) {
      case 'mcq':
        return (
          <MultipleChoice
            key={index}
            question={question}
            onChange={handleChange}
            value={formData[question.stem]}
            error={errors[question.stem]}
          />
        );
      case 'cr':
        if (question.lines > 1) {
          return (
            <TextArea
              key={index}
              question={question}
              onChange={handleChange}
              value={formData[question.stem]}
              error={errors[question.stem]}
            />
          );
        } else {
          return (
            <TextInput
              key={index}
              question={question}
              onChange={handleChange}
              value={formData[question.stem]}
              error={errors[question.stem]}
            />
          );
        }
      case 'section':
        return (
          <div key={index} className="section-header">
            {question.title && <h3>{question.title}</h3>}
            {question.instructions && <p>{question.instructions}</p>}
          </div>
        );
      default:
        return null;
    }
  };

  // If the form is submitted, show thank you message
  if (isSubmitted) {
    return (
      <div className="thank-you">
        <h2>Thank You!</h2>
        <p>{sampleData.thankyou}</p>
      </div>
    );
  }

  return (
    <div className="sample-survey">
      <h2>{sampleData.name}</h2>
      {sampleData.description && <p className="description">{sampleData.description}</p>}
      {sampleData.instructions && <p className="instructions">{sampleData.instructions}</p>}
      
      <form onSubmit={handleSubmit}>
        {sampleData.questions.map((question, index) => renderQuestion(question, index))}
        
        <button type="submit" className="submit-btn">Submit</button>
      </form>
      
      {sampleData.copyright && <p className="copyright" dangerouslySetInnerHTML={{ __html: sampleData.copyright }} />}
    </div>
  );
}

export default SampleSurvey;

Creating the SPI Survey

Now, let's implement the Sensory Preferences Inventory survey:

src/components/SPISurvey.js

import React, { useState, useContext } from 'react';
import { useHistory } from 'react-router-dom';
import LikertScale from './FormComponents/LikertScale';
import { SPIContext } from '../contexts/SPIContext';
import spiData from '../data/spi.json';

function SPISurvey() {
  const history = useHistory();
  const { answers, setAnswers, calculateResults } = useContext(SPIContext);
  
  // Track current question index for paging
  const [currentPage, setCurrentPage] = useState(0);
  
  // Filter out section headers to get just questions
  const questions = spiData.questions.filter(q => q.type !== 'section');
  
  // Find section headers to show instructions
  const sections = spiData.questions.filter(q => q.type === 'section');

  // Handle change in form fields
  const handleChange = (fieldName, value) => {
    setAnswers({
      ...answers,
      [fieldName]: value
    });
  };

  // Handle next button click
  const handleNext = () => {
    // Check if we have an answer for the current question
    const currentQuestion = questions[currentPage];
    if (!answers[currentQuestion.code]) {
      alert('Please answer the question before proceeding.');
      return;
    }
    
    // If this is the last question, process results and redirect
    if (currentPage === questions.length - 1) {
      const results = calculateResults();
      console.log('Survey completed with results:', results);
      history.push('/spi-report');
    } else {
      // Otherwise, go to next question
      setCurrentPage(currentPage + 1);
    }
  };

  // Get the current question
  const currentQuestion = questions[currentPage];
  
  // Find the relevant section header (if any)
  const currentSection = sections.find(section => {
    // Determine if this section precedes the current question
    const sectionIndex = spiData.questions.findIndex(q => q.code === section.code);
    const questionIndex = spiData.questions.findIndex(q => q.code === currentQuestion.code);
    return sectionIndex < questionIndex && 
           (sectionIndex === 0 || 
            !sections.some(s => {
              const otherIndex = spiData.questions.findIndex(q => q.code === s.code);
              return otherIndex > sectionIndex && otherIndex < questionIndex;
            }));
  });

  return (
    <div className="spi-survey">
      <h2>{spiData.name}</h2>
      {spiData.description && <p className="description">{spiData.description}</p>}
      {spiData.instructions && <p className="instructions">{spiData.instructions}</p>}
      
      {/* Show relevant section header */}
      {currentSection && currentPage < 3 && (
        <div className="section-header">
          {currentSection.instructions && <p>{currentSection.instructions}</p>}
        </div>
      )}
      
      <div className="question-container">
        <div className="progress-indicator">
          Question {currentPage + 1} of {questions.length}
        </div>
        
        <LikertScale
          question={currentQuestion}
          onChange={handleChange}
          value={answers[currentQuestion.code]}
        />
        
        <button 
          type="button" 
          className="next-btn" 
          onClick={handleNext}
        >
          {currentPage === questions.length - 1 ? 'Submit' : 'Next'}
        </button>
      </div>
      
      {spiData.copyright && <p className="copyright" dangerouslySetInnerHTML={{ __html: spiData.copyright }} />}
    </div>
  );
}

export default SPISurvey;

Creating the SPI Report

Finally, let's implement the report page for the SPI survey results:

src/components/SPIReport.js

import React, { useContext } from 'react';
import { Redirect } from 'react-router-dom';
import { SPIContext } from '../contexts/SPIContext';

function SPIReport() {
  const { results } = useContext(SPIContext);

  // If there are no results, redirect to the survey
  if (!results) {
    return <Redirect to="/spi" />;
  }

  // Helper function to get description for each learning style
  const getLearningStyleDescription = (type) => {
    switch (type) {
      case 'visual':
        return 'You learn best through seeing. Visual learners benefit from diagrams, charts, pictures, and written directions.';
      case 'auditory':
        return 'You learn best through listening. Auditory learners benefit from lectures, discussions, and verbal instructions.';
      case 'kinesthetic':
        return 'You learn best through doing. Kinesthetic learners benefit from hands-on activities, experiments, and physical movement.';
      default:
        return '';
    }
  };

  // Helper function to get recommendations for each learning style
  const getLearningStyleRecommendations = (type) => {
    switch (type) {
      case 'visual':
        return [
          'Use color coding and highlighting in your notes',
          'Create mind maps or diagrams',
          'Use flashcards with images',
          'Watch videos related to the material'
        ];
      case 'auditory':
        return [
          'Record lectures and listen to them again',
          'Discuss concepts with others',
          'Read material aloud to yourself',
          'Use mnemonic devices or rhymes'
        ];
      case 'kinesthetic':
        return [
          'Take frequent breaks during study sessions',
          'Use physical movement while studying',
          'Create models or physical representations',
          'Apply concepts through practical exercises'
        ];
      default:
        return [];
    }
  };

  return (
    <div className="spi-report">
      <h2>Your Sensory Preferences Results</h2>
      
      <div className="results-summary">
        <p>Based on your responses, here is a breakdown of your sensory preferences:</p>
        
        <div className="chart">
          {/* Simple bar chart representation */}
          {results.map((result, index) => (
            <div key={index} className="chart-item">
              <div className="chart-label">
                {result.type.charAt(0).toUpperCase() + result.type.slice(1)}
              </div>
              <div className="chart-bar-container">
                <div 
                  className="chart-bar" 
                  style={{ width: `${result.percent}%` }}
                >
                  {result.percent}%
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      
      <div className="results-details">
        <h3>Understanding Your Learning Preferences</h3>
        
        {results.map((result, index) => (
          <div key={index} className="learning-style">
            <h4>
              {result.type.charAt(0).toUpperCase() + result.type.slice(1)} Learner 
              ({result.percent}%)
            </h4>
            <p>{getLearningStyleDescription(result.type)}</p>
            
            <h5>Recommendations:</h5>
            <ul>
              {getLearningStyleRecommendations(result.type).map((rec, i) => (
                <li key={i}>{rec}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      
      <div className="report-footer">
        <p>Remember that everyone has a mix of learning preferences. Use these insights to enhance your study habits and learning strategies.</p>
      </div>
    </div>
  );
}

export default SPIReport;

Setting Up Data Files

To use the survey data, we need to import the JSON files into our project:

Project Setup

// Create a data folder in the src directory
mkdir src/data

// Copy the JSON files into the data folder
// sample.json, spi.json, and bonus.json should be placed here

Bonus Features

Let's implement the employee number field in the Sample Survey as requested in the bonus tasks:

Adding Employee Number Field to SampleSurvey.js

// Add this function to the renderQuestion function in SampleSurvey.js
// Inside the renderQuestion function, add this special case:

// Special case for employee number (bonus feature)
if (question.type === 'cr' && question.stem === 'Employee Number') {
  return (
    <TextInput
      key={index}
      question={{...question, type: 'password'}}
      onChange={handleChange}
      value={formData[question.stem]}
      error={errors[question.stem]}
    />
  );
}

Then you would need to add a new question object to the sample.json file:

Adding Employee Number to sample.json

// Add this object to the questions array in sample.json
{
  "stem": "Employee Number",
  "type": "cr",
  "size": "narrow",
  "lines": 1,
  "charlimit": 20,
  "optional": false
}

Step 4: Review/Extend

Now that we've implemented our solution, let's review what we've built and consider extensions or improvements.

Testing the Application

To test your React Surveys application, make sure you've completed these steps:

  1. Set up the project structure as outlined
  2. Created all necessary components
  3. Imported the JSON data files into the src/data directory
  4. Set up proper routing in App.js
  5. Implemented the context for sharing SPI data

Run your application with:

npm start

This will start the development server and open your application in a browser. Test each of the following:

Common Issues and Solutions

Issue: Form Validation Not Working

If validation isn't working properly, check:

Issue: SPI Results Not Showing

If SPI results aren't calculating or displaying:

Possible Extensions

Implement the Bonus Survey

You can extend the application by implementing the bonus survey with Likert scale questions. Create a new component similar to the other surveys and add routing for it.

Add Page Breaks

Implement the pagebreak feature mentioned in the requirements to split longer surveys into multiple pages.

Improve the UI/UX

Add animations, a more polished design, and better mobile responsiveness to make the application more user-friendly.

Add Data Persistence

Implement localStorage or a backend service to save survey results between sessions.

Updating to Modern React

As mentioned in the project introduction, this implementation uses React Router 5 as specified in the requirements. If you want to update to more modern React practices, consider:

Understanding Key Concepts

The Virtual DOM

React uses a tree data structure called the Virtual DOM to model the actual DOM. This is a key concept in React that helps it optimize rendering performance.

How It Works

When you write JSX code like <div>Hello</div>, React transforms this into a virtual DOM node. When the state of your component changes, React creates a new virtual DOM tree and compares it with the previous one (a process called "diffing"). It then only updates the parts of the actual DOM that have changed.

Analogy

Think of it like an architect's blueprint. When you want to renovate your house, you don't immediately start knocking down walls. Instead, you create a blueprint of the changes, compare it with the current house, and then only make the necessary changes. The Virtual DOM is the blueprint, and the actual DOM is your house.

React Hooks

Hooks are functions that let you "hook into" React state and lifecycle features from function components. They were introduced in React 16.8 as a way to use state and other React features without writing a class.

Key Hooks We Used

  • useState - For managing component-specific state
  • useContext - For consuming values from a React Context
  • useHistory - For programmatic navigation (from React Router)

Real-world Example

Using useState is like having a notebook where you jot down information that might change. For example, in our survey forms, we use it to keep track of the answers the user has provided, and we update this notebook (state) whenever the user changes their answer.

React Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level. It's designed to share data that can be considered "global" for a tree of React components.

How We Used It

In our application, we used Context to share the SPI survey answers and results between the survey component and the results component. This allowed us to maintain the state of the survey across different pages.

Analogy

Context is like a school announcement system. Instead of passing a message from teacher to student to another student (prop drilling), the principal can make an announcement that everyone in the school can hear directly.

Form Validation

Form validation is the process of checking if user input meets certain criteria before submitting the form. It's important for ensuring data integrity and providing a good user experience.

Our Approach

In the Sample Survey, we implemented validation by checking if required fields have values before allowing submission. This is a simple but effective form of validation.

Real-world Application

Form validation is like a bouncer at a club checking IDs. It ensures that only valid data gets through to your application, preventing issues down the line.

Conclusion

In this tutorial, we've built a complete React Survey Application that demonstrates many important React concepts:

By following George Polya's 4-step problem-solving method, we systematically approached this complex task, breaking it down into manageable pieces and building up to a complete solution.

You can use this project as a foundation for more complex form-based applications, adding features like data persistence, user authentication, or more sophisticated validation as needed.

Happy coding!