title: how to display data from console log to website react?
body: <p>In my code, I am able to show the available apartments with the post request. However, this can only be shown in the console.log. Yet I want to display it as a list on the website after pushing a Button. Subsequently, I want to achieve that the appearing webpage (after pushing the button) is going to display the list of the available apartments which is now displayed in the console log. However, I am confused about how I can achieve this with my current code.</p>
  <pre><code>function Search() {
      const history = useHistory();
  
      const [startDate, setStartDate] = useState(new Date());
      const [endDate, setEndDate] = useState(new Date());
  
      const [numberOfBeds, setNumberOfBeds] = useState();
   
      const selectionRange = {
        startDate: startDate,
        endDate: endDate,
        key: &quot;selection&quot;
      };
  
      const handleNumberOfBedsChange = (event) =&gt; setNumberOfBeds(event.target.value);
  
    
      function handleSelect(ranges) {
        setStartDate(ranges.selection.startDate);
        setEndDate(ranges.selection.endDate);
      }
  
      const onSearch = useCallback(() =&gt; {
        console.log(&quot;startDate: &quot;, startDate);
        console.log(&quot;endDate: &quot;, endDate);
        console.log(&quot;numberOfBeds&quot;, numberOfBeds);
     
  
        axios
          .post(`/availableapartments`, {
            startDate,
            endDate,
            numberOfBeds
          })
          .then((res) =&gt; {
           console.log(res);
           console.log(res.data);
         
           history.push('/availableapartments')
  
          }); 
  
      }, [startDate, endDate, numberOfBeds]);
    
   
  
      return (
  
        
        &lt;div className=&quot;datepickersearch&quot;&gt;
          &lt;DateRangePicker ranges={[selectionRange]} onChange={handleSelect} /&gt;
    
          &lt;h2&gt; Number of guests&lt;/h2&gt;
          &lt;input min={0} defaultValue={2} max={7} type=&quot;number&quot;  value={numberOfBeds}  onChange={handleNumberOfBedsChange}/&gt;
          &lt;Button onClick={onSearch}&gt;Search Apartments&lt;/Button&gt;
        
         
          
        &lt;/div&gt;
      );
    }
    
    export default Search;
  </code></pre>