@IvanLu
Начинающий веб-разработчик

Почему когда использую styled-components происходит ререндер?

У меня есть блок в котором находится инпут с кнопкой сабмит и список того что пользователь ввел в инпут (обычная туду). Все работает нормально но вот решил я попробовать styled-components, написал стили для блока:
const Todo = styled.div`
    margin: 0 auto;
    margin-top: 2%;
    border-radius: 8px;
    width: 200px;
  `;

Далее я обернул свой блок в Todo:
<Todos>
      <div className="todos-wrapper">
        <div className="search">
          <input
            type={"text"}
            placeholder={"Enter task here"}
            value={value}
            onChange={handleChange}
            onKeyPress={handlePress}
          />
          <button onClick={addTodo} className={"submit"}>
            Submit
          </button>
        </div>
        <TodoList
          todos={todos}
          removeTodo={removeTodo}
          toggleTodo={toggleTodo}
        />
      </div>
    </Todos>

Все работает, стили применились но после этого в инпут можно ввести только 1 символ и когда его ввел то лист по какой-то причине ререндерится (потом при клике на инпут можно ввести второй символ и так же лист обновляется и тд) Такой проблемы с обычным css не было, в чем может быть загвоздка ?
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы