How to fix Warning: A component contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). in React

import { useState } from 'react';

function MyForm() {
  // Initialize state with the default value
  const [inputValue, setInputValue] = useState('initial value');

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
}

import { useRef } from 'react';

function MyForm() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Access the current value from the DOM
    console.log(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        defaultValue="initial value"
        ref={inputRef}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

// Problem: props object contains both
function Input(props) {
  return <input {...props} />; // May contain both value and defaultValue
}

// Solution 1: Destructure and only use one
function Input({ defaultValue, ...props }) {
  return <input {...props} />; // Explicitly exclude defaultValue
}

// Solution 2: Use explicit props
function Input({ value, onChange, type, placeholder }) {
  return <input type={type} value={value} onChange={onChange} placeholder={placeholder} />;
}

// Problem: value might be undefined initially
const [name, setName] = useState(user?.name); // undefined if user is null

return <input value={name} onChange={e => setName(e.target.value)} />;

// Solution: Always provide a defined value
const [name, setName] = useState(user?.name || '');

// Or use nullish coalescing
const [name, setName] = useState(user?.name ?? '');

return <input value={name} onChange={e => setName(e.target.value)} />;