Unable to use my reusable react component inside react bootstrap modal

Question

I Have created a resusable textarea react component:

import React from 'react';
import '../form-input/form-input.styles.scss';

const TextAreaComponent = ({ handleChange, label, ...otherProps }) => (
 <div className="group">
   <label htmlFor="comments">{label}</label>
   <textarea className='form-input m-0' id="comments" onChange={handleChange} {...otherProps} />
 </div>
); export default TextAreaComponent;

Which is working fine when being used in any other component, but when I use it inside react-bootstrap modal, on each key press the focus is getting lost from text area and I have to click inside it again. I doubt that on each key press the state is changing due to which the modal re renders and that's why focus from text area is getting lost.

This is how am using it inside react bootstrap modal:

  import React, { useState } from 'react';
  import './callStatusCellRenderer.styles';
  import Button from 'react-bootstrap/Button';
  import Modal from 'react-bootstrap/Modal';
  import baseUrl from '../../../apiUtils/baseUrl';
  import CustomDatePicker from '../custom-datepicker/custom-datepicker.component';
  import SelectInputComponent from '../select-input/selectInput.component';
  import TextAreaComponent from '../textarea-input/textarea.component';
  import {
  ButtonContainer,
  CalendarContainer,
  InputContainer
  } from './callStatusCellRenderer.styles';
  import axios from 'axios';

  const CallStatusRendererComponent = ({ data }) => {
    const callStatusOption = ['Option A', 'Option B', 'Option C', 'Option D'];

  const [modalShow, setModalShow] = useState(false);
  const [status, setStatus] = useState(data.callStatusInfo.status);
  const [callDate, setCallDate] = useState(new Date(data.callStatusInfo.dt) || new Date());
  const [update, setUpdate] = useState(false);
  const [comments, setComments] = useState(data.callStatusInfo.comments);

  const callInfoS = {
    initialStatus: data.callStatusInfo.status,
    initialCallDate: data.callStatusInfo.dt || new Date(),
    initialComments: data.callStatusInfo.comments
  };

  const getValue = () => {
    if (update) {
      return status;
    } else {
      return callInfoS.initialStatus
    }
  };

  const onDateChange = dt => setCallDate(dt);

  const PopUpModal = (props) => {
    const onSubmit = async e => {
      e.preventDefault();
      props.onHide();
      const patchBody =  {
        "status": status,
        "dt": callDate,
        'comments': comments
      };
      const updateCallStatusUrl = `${baseUrl}<<myAPIURL>>${data._id}`;
      const config = {
        headers: {
          'Content-type': 'application/json',
          'Authorization': localStorage.getItem('token')
        }
      };
      await axios.patch(updateCallStatusUrl, {callStatusInfo: patchBody}, config);
      setUpdate(true);
    };

    return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            animation={false}
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              Update Call Info
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Call Details</h4>
            <InputContainer>
              <SelectInputComponent
                name="status"
                label="Status"
                value={status}
                defaultOption="Select Status"
                options={callStatusOption}
                onChange={(e) => setStatus(e.target.value)}
              />
            </InputContainer>
            <TextAreaComponent name="comments" label="Comments" value={comments} onChange={(e) => setComments(e.target.value)}/>
            <CalendarContainer>
              <div className="mr-2"> Called Patient On:</div>
              <CustomDatePicker className="ml-4" dtVal={callDate} handleChange={onDateChange}/>
            </CalendarContainer>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={e => onSubmit(e)}>Save</Button>
          </Modal.Footer>
        </Modal>
    );
  };

  return (
      <>
        <div onClick={() => setModalShow(true)}>
          <ButtonContainer>{getValue()}</ButtonContainer>
        </div>
        <PopUpModal
          show={modalShow}
          onHide={() => setModalShow(false)}
        />
      </>
  );
};export default CallStatusRendererComponent;

How can I type in my reusable text area without it loosing focus on each key press.

Answer 1

I was able to fix the issue, this SO question and solutions mentioned over here helped me: ReactJs component structure - Form inside modal

I basically separated the Modal body part and all it's dependent state and setters method to a separate component