title: Rendering not happening on initial onClick in react
body: <p>So I have created a website that shows the appointments of the date clicked on react calendar. It is currently working but only once a date has been clicked three times and the no appointment days are not showing an empty appointment div, instead, they are showing the last appointments shown.</p>
  <p>How would I make the rendering take place on the first click and how would I display nothing on the days there are no appointments?</p>
  <p>My code is as follows:</p>
  <pre><code>const VetItem = (props) =&gt; {
      
  //=============================================================================
  // Declaring Variables
  //=============================================================================
  
   const user = sessionStorage.getItem('activeUser');
  
  const [userId, setUserId] = useState({
          activeUser: sessionStorage.getItem('activeUser'),
      });
  
  const [activeVet, setActiveVet] = useState();
  const [itemId, setItemId] = useState();
  const [renderActiveVet, setRenderActiveVet] = useState();
  
  const [inputs, setInputs] = useState({
      userId: sessionStorage.getItem('activeUser'),
      itemId:'',
  });
  
  //=============================================================================
  // Onclick event to show vet
  //=============================================================================
  
  const showVetInfo = (event) =&gt; {
   
      
      //Toggles colour
      //document.classList.remove('bg-salmon');
      //event.currentTarget.classList.toggle('bg-salmon');
      setRenderActiveVet(true);
      event.preventDefault();
      
     
      //set Id to id of clicked div
      let id = event.currentTarget.id;
      setItemId(event.currentTarget.id);
      console.log(id);
  
      let value = event.currentTarget.id;
      console.log(value);
      setInputs({...inputs, itemId: value});
      console.log(inputs);
      //if first input is empty, set error message to nothing
      if(inputs.itemId == ''){console.log(&quot;no id&quot;)}
  
      //read clicked doctor
      axios.post('http://localhost:80/project-api/readActiveDoctor.php',inputs)
      .then((res)=&gt;{
      let data = res.data;
      //render clicked doctors card
      setRenderActiveVet(true);
      setActiveVet(data.map((item) =&gt;  &lt;DoctorInfo key={item.id} rerender={setRenderActiveVet} uniqueId={item.id} name={item.name} surname={item.surname} specialization={item.specialization} age={item.age} gender={item.gender} email={item.email} contact={item.phoneNumber} doctorId={item.doctorId} room={item.room} profileImg={item.profileImage} /&gt;)) 
      // console.log(data);
  
        })
        .catch(err=&gt;{
          console.log(err);
          setRenderActiveVet(true);
        });
  
  
  
  }//end of onClick
  
  
  
  //=============================================================================
  // set colour of clicked doctor card
  //=============================================================================
      const [activeItem, setActiveItem] = useState(0);
      
     
      const [activeButton, setActiveButton] = useState();
  
  //=============================================================================
  //Attempt to render image on vetItem
  //=============================================================================
  const [renderImage, setRenderImage] = useState();
  useEffect(()=&gt;{
  
      
      console.log(props.profileImage)
      let source = props.profileImage;
      let renderpath = 'http://localhost:80/project-api/' + source;
      setRenderImage(renderpath);
  
   },[]);
  
  
     
  //=============================================================================
  // html code
  //=============================================================================
    
      return (
          
          &lt;div className='vet'&gt;
              &lt;button  onClick={(e)=&gt;{showVetInfo(e)}} className={activeButton === (&quot;1&quot;) &amp;&amp; &quot;active&quot;} data-value={props.uniqueId} id={props.uniqueId}   &gt;
              &lt;div className='individual-vet' id={props.uniqueId}  &gt;
               
                       &lt;div className='vet-block-img'&gt;  &lt;img className='profileImg vet' src={renderImage}/&gt;&lt;/div&gt;
                       &lt;div className='vet-block-text'&gt;
                           &lt;h2&gt;Dr. {props.name + &quot; &quot; + props.surname}&lt;/h2&gt;
                           &lt;h4&gt;{props.specialization}&lt;/h4&gt;
                       &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/button&gt;
                  &lt;div className='docInfoComp'&gt;
  
                  {activeVet}    
                  &lt;/div&gt;
                 
          &lt;/div&gt;
      );
  };
  
  export default VetItem;
  </code></pre>