0

I have a series of text input fields - their input is managed by useState like this:

const [formFields, setFormFields] = useState([
{ textinput1: "", textinput2: "", textinput3: "", reactQuill: "" } ]);

Their handle change is managed with this function, because more text fields can be added, and every index of the additions has to have its input get saved:

function handleChangeInput(index, event) {
    const values = [...formFields];
    values[index][event.target.name] = event.target.value
    setFormFields(values);
}

And this is what they look like and function as intended:

{
      formFields.map((formField, index) => (

      <React.Fragement key={index}>

      <TextField

      name='textinput1'
      value={formField.textinput1}
      onChange={event => handleChangeInput(index, event)}
      
      />
      ))
      }

However, when I try the same exact logic with the React Quill (rich text editor) input, it's not working at all. So for example, this will not work:

 <ReactQuill 
    
    name="reactQuill"
    onChange={event => handleChangeInput(index, event)}
    value={formField.reactQuill}
    

    />

I am getting an error of "name" being undefined, and I am not sure how to work around this? Thanks in advance if anyone knows how to fix this!

Gabriel
  • 41
  • 7
  • Can you try to console.log the event you receive in the handleChangeInput function ? Maybe this is a bit different from usual events from textfields – Guillaume Jun 30 '22 at 20:19
  • Yes, so when I console.log(event) for the normal text fields, I get the typical event info in the console. When I console.log(event) for reactQuill, I get an error (for not defining name) and the event is actually just logging the HTML unparsed text from the rich text editor. So I have no idea how I would get the e.target.name from something like that. – Gabriel Jun 30 '22 at 20:49
  • Ok so the event has to be different, you could maybe just send the name as a new parameter ? `onChange={event => handleChangeInput(index, event, 'reactQuill')}` ? – Guillaume Jul 01 '22 at 07:25
  • 1
    Yep that worked! I changed the handleChangeInput parameters to (index, targetName, targetValue) and for the regular textfields, the targetName is event.target.name and for the targetValue it is event.target.value. For React Quill, it is the name of the state property I want to change, like so: onChange={ value => handleChangeInput(index, 'reactQuill', value) – Gabriel Jul 01 '22 at 16:25

1 Answers1

1

The issue was fixed. Since the React Quill text editor does not return a traditional event like other text fields do, my handleChangeInput had to be modified to:

function handleChangeInput(index, targetName, targetValue) {
     const values = [...formFields];
     values[index][targetName] = targetValue
     setFormFields(values); }

And the onChange for text fields had to be changed to:

onChange={event => handleChangeInput(index, event.target.name, event.target.value)}

The onChange for React Quill had to be changed to:

onChange={value => handleChangeInput(index, 'reactQuill', value)}

I hope this helps someone in the future!

Gabriel
  • 41
  • 7