Placeholder text not showing in UI on React.js-CodePudding

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

CodePudding user response：

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: ' ',
});