input field doesnt allow to edit-CodePudding

Hi guys I am trying to edit the input field below and cant. I getting some data from a server and I am putting this data on the value of the input. The idea is that one we click the icon to allow the field to be editable but still cant edit.

This is the input with props customised:


 <input
          {...field}
          //   required={props.required}
          disabled={props.disabled}
          value={props.value}
          type={props.type}
          autoComplete={props.autoComplete}
          pattern={props.pattern}
          className={`mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm  rounded-md ${
            error ? 'border-red-500' : 'border-gray-500'
          }
          ${
            props.disabled
              ? 'disabled:shadow-none disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200'
              : 'border-gray-500'
          } `}
        />

And here is where I am actually using it. So once I click the icon its value comes true but cant edit inside the already value that returns from the server.


const [agent, setAgent] = useState<EstateAgentResponse | null>(null)
  const [enableField, setEnableField] = useState<boolean>(false)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { id } = params

        const agentUsers = await getEstaAgentUsers(parseInt(id!, 10))
        const agent = await getEstateAgentById(parseInt(id!, 10))

        setAgentUsers(agentUsers)
        setAgent(agent)
      } catch (error) {
        // ToDo:
        // We should handle the error message
        toast.error(`${error}`)
      }
    }
    fetchData()
  }, [])

 const handleInputField = () => {
    setEnableField(!enableField)
  }

<PencilAltIcon className="block h-4 w-4" aria-hidden="true" onClick={handleInputField} />
                              <InputField
                                name="businessName"
                                label="Business name"
                                disabled={!enableField}
                                value={agent?.businessName}
                                type="text"
                                rules={{
                                  required: 'This is required',
                                }}
                              />

CodePudding user response：

You need to made the state instead of direct passing the value agent?.businessName in InputField as you can see the below code, I hope this would be helpful and also works. thanks

const [agent, setAgent] = useState<EstateAgentResponse | null>(null)
  const [enableField, setEnableField] = useState<boolean>(false);
  const [businessName, setBusinessName] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { id } = params

        const agentUsers = await getEstaAgentUsers(parseInt(id!, 10))
        const agent = await getEstateAgentById(parseInt(id!, 10));
        setBusinessName(agent?.businessName);

        setAgentUsers(agentUsers)
        setAgent(agent)
      } catch (error) {
        // ToDo:
        // We should handle the error message
        toast.error(`${error}`)
      }
    }
    fetchData()
  }, [])

 const handleInputField = () => {
    setEnableField(!enableField)
  }

<PencilAltIcon className="block h-4 w-4" aria-hidden="true" onClick={handleInputField} />
                              <InputField
                                name="businessName"
                                label="Business name"
                                disabled={!enableField}
                                value={businessName}
                                onChange={e => setBusinessName(e.target.name)}
                                type="text"
                                rules={{
                                  required: 'This is required',
                                }}
                              />

In input component you need to add onChange prop as you can see the below code

<input
          {...field}
          //   required={props.required}
          disabled={props.disabled}
          value={props.value}
          onChange={props.onChange}
          type={props.type}
          autoComplete={props.autoComplete}
          pattern={props.pattern}
          className={`mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm  rounded-md ${
            error ? 'border-red-500' : 'border-gray-500'
          }
          ${
            props.disabled
              ? 'disabled:shadow-none disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200'
              : 'border-gray-500'
          } `}
        />