title: How can I re-render to display changes without refreshing the page?
body: <p>I need help with this bug on my MERN website as I can't figure out how to fix this step on my own.</p>
  <p>Every time the users make changes to the backend, I want to re-render it and display it on the UI - without having to refresh the page.</p>
  <p>But in my case, everything is working as I expected but there is still 1 last problem:</p>
  <p><strong>The process:</strong></p>
  <ul>
  <li>On begin, the website will display a <code>foodList</code> table with all data from the backend.</li>
  <li>When the users use the <strong>Filter &amp; Search Bar</strong> to find what they want to see. Behind the scenes, it will make a search from filtering out the items in <code>foodList</code> array and then put it to the <code>searchedFood</code> array. All the <strong>search results</strong> will be returned in the <code>searchedFood</code> table.</li>
  <li>On <strong>searching</strong>, the page will hide the <code>foodList</code> table and display the <code>searchedFood</code> table.</li>
  <li>When users click on the <code>clearSearch</code> button, it will bring the <code>foodList</code> data table back and hide the <code>searchedFood</code>.</li>
  </ul>
  <p><strong>What's working:</strong></p>
  <ul>
  <li><p>When I make changes on the <code>foodList</code> table, it will re-render and display the changes instantly. It will also re-render the <code>searchedFood</code> table when I try to search for that changed item after - all without having to refresh the page.</p>
  </li>
  <li><p>When I search for an item and then make changes on a searched item (Which is on the <code>searchedFood</code> table) - it will re-render and display the changes instantly.</p>
  </li>
  </ul>
  <p><strong>What's not working:</strong></p>
  <ul>
  <li>But then I click the <code>clearSearch</code> button to return to the full <code>foodList</code> table. The changes I just made in <code>searchedFood</code> won't re-render automatically on <code>foodList</code> - I need to refresh the page in order to see the changes I've made.</li>
  </ul>
  <p>As I understand, there's something missing in the return to the <code>foodList</code> table step that isn't triggering the re-render. But what can we do and how to implement it in my code?</p>
  <hr />
  <p><strong>Demo:</strong>
  Watch my short demo video <a href="https://drive.google.com/file/d/1Rq-Njd-MZ8SdpiS2LP3M4758MpgBGO3k/view?usp=sharing" rel="nofollow noreferrer">here</a></p>
  <br>
  <h4>My code</h4>
  <p><strong>- App.js</strong></p>
  <pre><code>&lt;!-- language: lang-js --&gt;
  export default function App() {
    const [foodName, setFoodName] = useState('')
    const [isVegetarian, setIsVegetarian] = useState('no')
    const [priceRange, setPriceRange] = useState('$')
    const [foodUrl, setFoodUrl] = useState('')
    const [foodList, setFoodList] = useState([])
  
    const [searchedFood, setSearchedFood] = useState([])
    const [noResult, setNoResult] = useState(false)
  
    // Read from db:
    useEffect(() =&gt; {
      Axios.get(&quot;https://project.herokuapp.com/read&quot;)
        .then((response) =&gt; {
          setFoodList(response.data)
        })
        .catch(error =&gt; {
          console.log(`The error is: ${error}`)
          return
        })
    }, [])
    
    // Add Food to list:
    const addToList = async (event) =&gt; {
      event.preventDefault()
      try {
        await Axios.post(
          &quot;https://project.herokuapp.com/insert&quot;, 
          {
            foodName: foodName,
            isVegetarian: isVegetarian,
            priceRange: priceRange,
            foodUrl: foodUrl,
          }
        )
          .then((response) =&gt; {
            setFoodList([...foodList, { _id: response.data._id, foodName: foodName, isVegetarian: isVegetarian, priceRange: priceRange, foodUrl: foodUrl }])
            setFoodName('')
            setIsVegetarian('no')
            setPriceRange('$')
            setFoodUrl('')
          })
        } catch(err) {
          console.error(`There was an error while trying to insert - ${err}`)
        }
      }
  
  
      // Paginate states:
      const [currentPage, setCurrentPage] = useState(1)
      const [foodPerPage] = useState(10)
      
      // Get current food:
      const indexOfLastFood = currentPage * foodPerPage
      const indexOfFirstFood = indexOfLastFood - foodPerPage
      const currentFood = foodList.slice(indexOfFirstFood, indexOfLastFood)
      const currentSearchedFood = searchedFood.slice(indexOfFirstFood, indexOfLastFood)
      
      // Pagination:
      const paginate = (pageNumber) =&gt; {
        setCurrentPage(pageNumber)
      }
    
    return (
      &lt;section&gt;
        &lt;FilterSearch
          foodList={foodList}
          searchedFood={searchedFood}
          setSearchedFood={setSearchedFood}
          noResult={noResult}
          setNoResult={setNoResult}
          paginate={paginate}
        /&gt;
        {noResult ? &lt;ResultNotFound/&gt;
          :
            &lt;FoodListTable
              foodName={foodName}
              priceRange={priceRange}
              isVegetarian={isVegetarian}
              foodUrl={foodUrl}
              foodList={foodList}
              setFoodList={setFoodList}
              currentFood={currentFood}
              searchedFood={searchedFood}
              setSearchedFood={setSearchedFood}
              currentSearchedFood={currentSearchedFood}
              totalFood={foodList.length}
              totalSearchedFood={searchedFood.length}
              currentPage={currentPage}
              paginate={paginate}
              noResult={noResult}
              foodPerPage={foodPerPage}
            /&gt;
        }
      &lt;/section&gt;
    )
  }
  </code></pre>
  <p><strong>- FilterSearch.js</strong></p>
  <pre><code>&lt;!-- language: lang-js --&gt;
  export default function FilterSearch(props) {
    const [textSearch, setTextSearch] = useState('')
    const [priceDropdown, setPriceDropdown] = useState('')
    const [vegDropdown, setVegDropdown] = useState('')
  
    // Handle Search button:
    const handleSearch = (event) =&gt; {
      event.preventDefault()
      // Search logic:
      const newSearch = props.foodList.filter((food) =&gt; {
        if (textSearch !== '' &amp;&amp; vegDropdown === '' &amp;&amp; priceDropdown === '') {
          return (
            Object.values(food)[1].toLowerCase().includes(textSearch.toLowerCase())
          )
        } else if (// Other conditions) {
            // Other filter logic in here
        } else {
          return food
        }
      })
      props.setSearchedFood(newSearch)
      if (!newSearch.length) {
        props.setNoResult(true)
      } else {
        props.setNoResult(false)
        props.paginate(1)
      }
    }
  
  
    // Clear search:
    const clearSearch = (event) =&gt; {
      event.preventDefault()
      props.setSearchedFood([])
      setTextSearch('')
      setPriceDropdown('')
      setVegDropdown('')
      props.setNoResult(false)
      props.paginate(1)
    }
  
    return (
      &lt;section&gt;
        &lt;form&gt;
          &lt;div&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Find your favorites&quot; name=&quot;text-search&quot; autoComplete=&quot;off&quot; value={textSearch} onChange={(event) =&gt; {setTextSearch(event.target.value)
            }} /&gt;
            &lt;div&gt;
              &lt;select name=&quot;veg-dropdown&quot; value={vegDropdown} onChange={(event) =&gt; {setVegDropdown(event.target.value)}} &gt;
                &lt;option disabled value=''&gt;Options&lt;/option&gt;
                &lt;option value='no'&gt;Non-veg&lt;/option&gt;
                &lt;option value='yes'&gt;Vegetarian&lt;/option&gt;
              &lt;/select&gt;
              &lt;select name='price-dropdown' value={priceDropdown} onChange={(event) =&gt; {setPriceDropdown(event.target.value)}} &gt;
                &lt;option disabled value=''&gt;Prices&lt;/option&gt;
                &lt;option value='$'&gt;$&lt;/option&gt;
                &lt;option value='$$'&gt;$$&lt;/option&gt;
                &lt;option value='$$$'&gt;$$$&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            {(textSearch || priceDropdown || vegDropdown) !== '' &amp;&amp; 
              &lt;button onClick={clearSearch}&gt;&lt;MdClear /&gt;&lt;/button&gt;
            }
            &lt;button onClick={handleSearch}&gt;&lt;HiSearch /&gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/section&gt;
    );
  }
  </code></pre>
  <p><strong>- FoodListTable.js</strong></p>
  <pre><code>&lt;!-- language: lang-js --&gt;
  
  export default function FoodListTable(props) {
      return (
          &lt;div&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;
                              Food name
                          &lt;/th&gt;
                          &lt;th&gt;Price&lt;/th&gt;
                          &lt;th&gt;
                              Action
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;body&gt;
               // Return a table with data from searchFood on search: 
                      {props.searchedFood.length &gt; 0 ? props.currentSearchedFood.map((val) =&gt; {
                          return (
                              &lt;FoodListRow
                                 val={val}
                                 key={val._id} 
                                 foodName={val.foodName}
                                 isVegetarian={val.isVegetarian}
                                 priceRange={val.priceRange}
                                 foodUrl={val.foodUrl}
                                 foodList={props.foodList}
                                 setFoodList={props.setFoodList}
                                 searchedFood={props.searchedFood}
                                 setSearchedFood={props.setSearchedFood}
                                 currentSearchedFood={props.currentSearchedFood}
                              /&gt;    
                          )
                      }) : props.currentFood.map((val) =&gt; { // If not on search, return a table with data from foodList:
                          return (
                              &lt;FoodListRow
                                 val={val}
                                 key={val._id}
                                 foodName={val.foodName}
                                 isVegetarian={val.isVegetarian}
                                 priceRange={val.priceRange}
                                 foodUrl={val.foodUrl}
                                 foodList={props.foodList}
                                 setFoodList={props.setFoodList}
                                 searchedFood={props.searchedFood}
                                 setSearchedFood={props.setSearchedFood}
                                 currentSearchedFood={props.currentSearchedFood}
  
                              /&gt;
                          )
                          })
                      }
                  &lt;/tbody&gt;
              &lt;/table&gt;
              // Display different Pagination on searched table and food list table:
              {props.searchedFood.length &gt; 0 ? 
                  &lt;Pagination foodPerPage={props.foodPerPage} totalFood={props.totalSearchedFood} paginate={props.paginate} currentPage={props.currentPage} /&gt;
                  :&lt;Pagination foodPerPage={props.foodPerPage} totalFood={props.totalFood} paginate={props.paginate} currentPage={props.currentPage} /&gt;
              }
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p><strong>- FoodListRow.js</strong></p>
  <pre><code>&lt;!-- language: lang-js --&gt;
  
  export default function FoodListRow(props) {
      // Edit food name:
      const [editBtn, setEditBtn] = useState(false)
      const handleEdit = () =&gt; {
          setEditBtn(!editBtn)
      }
  
      // Update Food Name:
      const [newFoodName, setNewFoodName] = useState('')
      const updateFoodName = (id) =&gt; {
          if (newFoodName) {
              Axios.put(&quot;https://project.herokuapp.com/update&quot;, {
                  id: id,
                  newFoodName: newFoodName,
              })
              .then(() =&gt; {
                  props.searchedFood.length &gt; 0 ?
                  props.setSearchedFood(props.searchedFood.map((val) =&gt; {
                      return (
                          val._id === id ? 
                          {
                              _id: id,
                              foodName: newFoodName,
                              isVegetarian: props.isVegetarian, priceRange: props.priceRange, 
                              foodUrl: props.foodUrl,
                          } : val
                      )
                  })) : props.setFoodList(props.foodList.map((val) =&gt; {
                      return (
                          val._id === id ? 
                          {
                              _id: id,
                              foodName: newFoodName,
                              isVegetarian: props.isVegetarian, priceRange: props.priceRange, 
                              foodUrl: props.foodUrl,
                          } : val
                      )
                  }))
              })
              .catch(error =&gt; console.log(`Update name failed: ${error}`))
          }
      }
      
  
      // Delete food:
      const deleteFood = (id) =&gt; {
          const confirm = window.confirm(`This action cannot be undone.\nAre you sure you want to delete this dish?`); 
          if(confirm === true){ 
            Axios.delete(`https://project.herokuapp.com/delete/${id}`)
            .then(() =&gt; {
              props.searchedFood.length &gt; 0 
              ? props.setSearchedFood(props.searchedFood.filter((val) =&gt; {
                  return val._id !== id
              }))
              : props.setFoodList(props.foodList.filter((val) =&gt; {
                  return val._id !== id
              }))
            })
          }
      }
  
      return (
          &lt;tr key={props.val._id}&gt;
              &lt;td&gt;
                  {props.val.foodName}
                  {props.val.isVegetarian}
                  // Display input field on Edit Mode:
                  {editBtn &amp;&amp; 
                      &lt;div&gt;
                          &lt;input
                              type=&quot;text&quot;
                              name=&quot;edit&quot;
                              placeholder=&quot;New food name..&quot;
                              autoComplete=&quot;off&quot;
                              onChange={(event) =&gt; {setNewFoodName(event.target.value)}}
                          /&gt;
                          &lt;button
                          onClick={() =&gt; updateFoodName(props.val._id)}
                          &gt;
                              ✓
                          &lt;/button&gt; 
                      &lt;/div&gt;
                  }
              &lt;/td&gt;
              &lt;td&gt;{props.val.priceRange}&lt;/td&gt;
              &lt;td&gt;
                  &lt;a 
                      href={props.val.foodUrl} 
                  &gt;
                      
                  &lt;/a&gt;
                  &lt;button 
                      onClick={handleEdit}
                  &gt;
                      ✏️
                  &lt;/button&gt;
                  &lt;button 
                      onClick={() =&gt; deleteFood(props.val._id)}
                  &gt;
                      ❌
                  &lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      );
  }
  </code></pre>