Placeholder text not showing in UI on React.js

Question

I am passing placeholder text as a prop to the <FormField/> from the <CreatePost/> . I need to show the placeholder text in the form but it is not showing but when i console.log in the <FormField/> placeholder text is showing in the console with no errors but not in the input tag.

passing props to the <FormField/> from <CreatePost/>

function CreatePost() {
  const navigate = useNavigate();
  const [form, setForm] = useState({
    name: ' ',
    photo: ' ',
    prompt: ' ',
  });
  const [generatingImg, setGeneratingImg] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = () => {};

  const handleChange = e => {};

  const handleSurpriseMe = () => {};

  return (
    <section className='max-w-7xl mx-auto'>
      
      <form className='mt-16 max-w-3xl' onSubmit={handleSubmit}>
        <div className='flex flex-col gap-5'>
          <FormField
            LabelName='Your name'
            type='text'
            name='name'
            placeholder='John Doe'
            value={form.name}
            handleChange={handleChange}
          />
          <FormField
            LabelName='Prompt'
            type='text'
            name='prompt'
            placeholder='Spongebob Squarepants in the Blair Witch Project'
            value={form.prompt}
            isSurpriseMe
            handleChange={handleChange}
            defaultValue='Initial value'
            handleSurpriseMe={handleSurpriseMe}
          />
        </div>
      </form>
    </section>
  );
}

FormField.jsx

function FormField({
  LabelName,
  type,
  name,
  placeholder,
  value,
  handleChange,
  isSurpriseMe,
  handleSurpriseMe,
}) {
  console.log(placeholder);
  return (
    <div>
      <div className='flex items-center mb-2 gap-2'>
        <label
          htmlFor={name}
          className='block text-sm font-medium text-gray-900'
        >
          {LabelName}
        </label>
        {isSurpriseMe && (
          <button
            className='font-semibold py-1 px-2 text-xs bg-[#ECECF1] hover:bg-[#d7d7e7] rounded-[5px] text-black'
            type='button'
            onClick={handleSurpriseMe}
          >
            Surprise me
          </button>
        )}
      </div>
      <input
        type={type}
        id={name}
        name={name}
        placeholder={placeholder}
        value={value}
        onChange={handleChange}
        required
        className='bg-gray-50 border border-gray-300 
        text-gray-900 text-sm rounded-lg focus:ring-[#4649ff]
        focus:border-[#4649ff] ouline-none block w-full p-3
        '
      />
    </div>
  );
}

Results showing in the console.log

John Doe
VM256 installHook.js:1861 John Doe
FormField.jsx:13 Spongebob Squarepants in the Blair Witch Project
VM256 installHook.js:1861 Spongebob Squarepants in the Blair Witch Project

Answer 1

When you press space in an HTML input field, the placeholder disappears.

So the same is happening in the above case. You are setting the initial value to a string with a space rather than an empty string. Setting the state to an empty string would get your job done

const [form, setForm] = useState({
    name: '', // this is an empty string
    photo: ' ',// this is a string with a space
    prompt: ' ',
});