Title rewritten as: Component is turning controlled input into uncontrolled input

Question

I'm building a website with a React frontend using GraphQL and Apollo. I created a page where the website administrator can update content in a specific part of the page, it works, but I keep getting the error in the console: Component is changing controlled input to uncontrolled input...

I also used the ReactQuill WYSIWYG editor. I thought this might be the problem but I've removed it and still get the same error.

This is the code for the content update page:

import { useState, useEffect } from 'react';
import { useMutation, useQuery } from '@apollo/client';
import { useNavigate, useParams } from 'react-router-dom';
import { GET_CONTENT_BY_ID } from '../../utils/queries';
import { UPDATE_CONTENT } from '../../utils/mutations';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const Content = () => {
  const { id } = useParams();
  const { loading, data } = useQuery(GET_CONTENT_BY_ID, {
    variables: { id: id },
  });

  const [contentHead, setContentHead] = useState('');
  const [contentText, setContentText] = useState('');

  useEffect(() => {
    const content = data?.contentById || {};
    if (content) {
      setContentHead(content.contentHead);
      setContentText(content.contentText);
    }
  }, [data, setContentHead, setContentText]);

  const [updateContent, { error }] = useMutation(UPDATE_CONTENT);
  const navigate = useNavigate();

  const submitHandler = async (e) => {
    e.preventDefault();
    try {
      const { data } = await updateContent({
        variables: {
          id,
          contentHead,
          contentText,
        },
      });
      navigate('/_admin');
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <Form onSubmit={submitHandler}>
      <Form.Group className="mb-3" controlId="contentHead">
        <Form.Label>Section Heading</Form.Label>
        <Form.Control
          value={contentHead}
          onChange={(e) => setContentHead(e.target.value)}
          required
        />
      </Form.Group>
      <Form.Group className="mb-3" controlId="contentText">
        <Form.Label>Text</Form.Label>
        <ReactQuill
          name="contentText"
          value={contentText}
          theme="snow"
          onChange={setContentText}
        />
      </Form.Group>
      <Button type="submit">Submit</Button>
    </Form>
  );
};

export default Content;

In ReactQuill, I tried onChange={(e) => contentText(e.target.value)}, but nothing changed. The way it is now is what I got from their git repository.

Answer 1

I found the answer in another question here. Although it's not the accepted answer, it solves the error.

In ReactJS, component is changing uncontrolled text input to controlled error

So for my form, I changed value={contentHead} and value={contentText} to value={contentHead || ''} and value={contentText || ''} and that solved the error !