duplicated items in scroll overflow react

user_15532324 0
Viewed 29

when I scroll, the first items still in the same place

I have an app that renders a list of items inside a ul that has been set to overflow-y scroll but when I scroll the fist items stay in place

// mapping through a list of recipes
  showIngList.map((item) => (
    <div className="recipe-display" key={item.recipe.url}>
      <div className="recipe-des">

        /* name of the recipe */

        <h2>{item.recipe.label }</h2>
        <p>Ingredients:</p>
        <ul className="list-group list-group-flush">

            /* mapping through the ingredients of a recipe */

          {item.recipe.ingredientLines.map((ingredent, key) => (
            <li key={key} className="list-group-item">
              {ingredent}
            </li>
          ))}
        </ul>
        <button onClick={closeIngHandler} className="btn btn-danger">
          Close
        </button>
      </div>
    </div>
  ))
reactjs css
1 Answers

I found out what was wrong it's just creating a new list of ingredients every time a recipe renders so there was like 20 of the ingredients lists and that's why when I scroll one the other 19 lists stay in place. it was fixed by moving the ingredients list to a sperate div where it doesn't get rendered every time a new recipe renders.

user_155323240
Related