How can I implement user-generated content in my React app?

How can I implement user-generated content in my React app?

You can use state management to store user-generated content and render it dynamically. Would you like a code example?

Yes, please provide a code example!

Sure! You can use a simple form to collect user input and then display it in a list. Here's a basic example:

import React, { useState } from 'react';

const UserContent = () => {
  const [content, setContent] = useState('');
  const [items, setItems] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setItems([...items, content]);
    setContent('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={content} 
          onChange={(e) => setContent(e.target.value)} 
          placeholder="Add your content" 
        />
        <button type="submit">Submit</button>
      </form>
      <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
};

This will allow users to submit content that gets displayed in a list.

That looks great! How can I add validation to the input?

You can add validation by checking the input before updating the state. For example, you can ensure the input is not empty:

const handleSubmit = (e) => {
  e.preventDefault();
  if (content.trim() === '') {
    alert('Content cannot be empty!');
    return;
  }
  setItems([...items, content]);
  setContent('');
};