How can I validate user-generated content in a React app?

How can I validate user-generated content in a React app?

You can use libraries like Formik or React Hook Form for managing forms and validation. Would you like to see an example?

Yes, please provide an example using Formik.

Sure! First, install Formik with npm install formik. Then, you can create a form like this:

import { Formik, Form, Field, ErrorMessage } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ content: '' }}
      validate={values => {
        const errors = {};
        if (!values.content) {
          errors.content = 'Required';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        console.log(values);
        setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="content" />
          <ErrorMessage name="content" component="div" />
          <button type="submit" disabled={isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
};

This will validate that the content field is not empty.

What if I want to add more complex validation rules?

You can use Yup for schema validation. You can define a validation schema and pass it to Formik like this:

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  content: Yup.string()
    .min(5, 'Too Short!')
    .max(100, 'Too Long!')
    .required('Required'),
});

<Formik
  validationSchema={validationSchema}
  ...
>

This allows you to set more complex rules easily.