title: Array map() method cannot show properly data in the list
body: <p>I have a problem to implement a list of doctors to be shown I have to change your state when you want to add the doctors after you split their names.</p>
  <p>If I add doctors in an object with a resource key and when I map through doctorDetailList` doctors name will be repeated every row.</p>
  <p>Below is my coding:</p>
  <p><strong>Show the existing doctor's name in the doctor's list</strong></p>
  <pre class="lang-html prettyprint-override"><code>if (propApptData &amp;&amp; propApptData.doctor  &amp;&amp; !preDoctor) {
        const doctors = propApptData.doctor ? propApptData.doctor.split(&quot;|&quot;): [propApptData.doctor];
        setDoctorDetailList([...doctorDetailList, { resource: doctors }]);
        setPreDoctor(true)
        console.log(doctors.length)
      }
      
  </code></pre>
  <p><strong>Add doctor</strong></p>
  <pre class="lang-html prettyprint-override"><code>const addDoctor = () =&gt; {
      var test = 0;
      doctorDetailList.forEach((list) =&gt; {
        if (list.id === searchDoctorName.id) {
          test++;
        }
      });
  
      if (test === 0) {
        setDoctorDetailList([...doctorDetailList, searchDoctorName]);
      }
    };
  </code></pre>
  <p><strong>Mapping</strong></p>
  <pre class="lang-html prettyprint-override"><code>{propApptData !== undefined &amp;&amp; (
                        &lt;ListGroup&gt;
                        {doctorDetailList.map((data, index) =&gt; (
                          &lt;ListGroup.Item&gt;
                            {data.resource}
                            &lt;CloseButton
                              variant=&quot;link&quot;
                              id={data.id}
                              onClick={(e) =&gt; {
                                setDoctorDetailList(
                                  doctorDetailList.filter(
                                    (doctor) =&gt; doctor.id !== data.id
                                  )
                                );
                              }}
                            /&gt;
                          &lt;/ListGroup.Item&gt;
                        ))}
                      &lt;/ListGroup&gt;
                      )}
  </code></pre>
  <p><strong>Formik</strong></p>
  <pre class="lang-html prettyprint-override"><code>const formik = useFormik({
      enableReinitialize: true,
      initialValues: apptData || initialValues,
      validationSchema: AppointmentSchema,
      onSubmit: (values, { setStatus, setSubmitting }) =&gt; {
        setSubmitting(true);
        enableLoading();
  
        var joinDoctors = doctorDetailList
          .map((data) =&gt; {
            return data.resource;
          })
          .join(&quot;|&quot;);
  
        checkUnavailableOrganizerSlot(
          formatServerDateTimeString(apptCheckingStartDate),
          formatServerDateTimeString(apptCheckingStopDate),
          joinDoctors
        )
          .then((res) =&gt; {
            if (res.data.isAvailable === true) {
              if (propApptData === undefined) {
                newAppointment(
                  moment(selectedDate).add(8, &quot;hours&quot;),
                  icpassport,
                  values.reason,
                  joinDoctors,
                  values.type,
                  values.location,
                  values.priorityID,
                  values.rootCause,
                  values.nextAction,
                  newPatient === true ? name : null,
                  newPatient === true ? phone : &quot;&quot;,
                  values.estimatedTime,
                  0
                )
                  .then((res) =&gt; {
                    disableLoading();
                    setSubmitting(false);
                    props.close();
                    props.reloadList();
                  })
                  .catch((e) =&gt; {
                    disableLoading();
                    setSubmitting(false);
                    if (e.response &amp;&amp; e.response.data) {
                      e.response.data.map((error) =&gt; {
                        setErrorType(error.data);
                        setErrorMessage(error.error_message);
                        setOpenNotificationPopup(true);
                        return &quot;&quot;;
                      });
                    }
                  });
              } else {
                updateAppointment(
                  propApptData.id,
                  joinDoctors,
                  values.type,
                  values.location,
                  values.rootCause,
                  values.reason,
                  values.nextAction,
                  propApptData.queueNumber,
                  values.priorityID,
                  values.status,
                  propApptData.appointmentDate,
                  propApptData.icPassport,
                  propApptData.reminder,
                  propApptData.treatmentPlannerID,
                  propApptData.refID,
                  propApptData.isCall,
                  propApptData.createdBy,
                  propApptData.createdDate,
                  propApptData.username,
                  &quot;0:&quot; + propApptData.duration + &quot;,&quot; + propApptData.appointmentType,
                  propApptData.patientComplaint,
                  propApptData.priorityID,
                  propApptData.locationID + &quot;,&quot; + propApptData.location,
                  propApptData.doctor,
                  propApptData.statusID + &quot;,&quot; + propApptData.statusDesc,
                  propApptData.remark,
                  propApptData.nextAction,
                  propApptData.removed,
                  values.estimatedTime
                )
                  .then((res) =&gt; {
                    disableLoading();
                    setSubmitting(false);
                    props.close();
                    props.reloadList();
                  })
                  .catch((e) =&gt; {
                    setSubmitting(false);
                    disableLoading();
                  });
              }
            } else {
              disableLoading();
              setSubmitting(false);
              formatSnackbar(
                res.data.resource +
                &quot; &quot; +
                intl.formatMessage({ id: &quot;GENERAL.NOT_AVAILABLE&quot; }) +
                &quot; &quot; +
                formatDateTimeStringAsDateTime(res.data.startDate) +
                &quot; - &quot; +
                formatDateTimeStringAsDateTime(res.data.stopDate) +
                &quot;.\n\n&quot; +
                intl.formatMessage({ id: &quot;GENERAL.PLEASE_RESCHEDULE&quot; }),
                &quot;error&quot;
              );
            }
          })
          .catch((e) =&gt; {
            console.log(&quot;fail&quot;, e);
            setSubmitting(false);
            disableLoading();
            formatSnackbar(
              intl.formatMessage({ id: &quot;GENERAL.APPOINTMENT_FAIL&quot; }),
              &quot;error&quot;
            );
          });
      },
    });
  
  </code></pre>
  <p>What I have tried:</p>
  <p>The resource is an array in doctorDetailList  . the array of doctors name that I split them with &quot;|&quot;. if I want to show doctors' name with spacing between their names I try to use join(&quot; &quot;) operator. like this {data.resource.join(&quot; &quot;)} , but it cannot work to show each doctor name in the doctor list.</p>
  <p>My error result, it will show 2 times and the 3 doctor name combined together. If normal results appear 1 time and separate 3 doctor names in the doctor list:</p>
  <p><a href="https://i.stack.imgur.com/g5Lnl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g5Lnl.png" alt="img1" /></a></p>
  <p>If I add more doctor name, the result show like below, it will appear two times, if normal just appear 1 time if I click add button:</p>
  <p><a href="https://i.stack.imgur.com/lRNBh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lRNBh.png" alt="img2" /></a></p>
  <p>I want the expected result like the below picture:</p>
  <p><a href="https://i.stack.imgur.com/uxovq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uxovq.png" alt="img7" /></a></p>
  <p>Hope someone can guide me on how to solve this problem. Thanks.</p>