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

Как сбросить состояние всех компонентов одной кнопкой?

Как правильно написать логик чтобы кнопка ресет делала все тексты снова черного цвета.
Когда кликаю на текст он меняеться на красный кликаю повторно и меняеться на черный.
а когда нажимаю ресет то ничено не происходит ((

import './App.css';
import Text from './Text/Text';
import {useState} from 'react'

function App() {

  let [status, setStatus] = useState(false)


  let list = [
    {id: 1, text: 'Text 1'},
    {id: 3, text: 'Text 2'},
    {id: 2, text: 'Text 3'},
  ]

  function resetColor(params) {
    setStatus(false)
  }

  return (
    <div className="App">
      <button
        onClick={()=>{resetColor()}}
      >reset color</button>
      {list.map(({id, text}) => {
        return (
          <Text key={id} text={text} />
        )
      })}
    </div>
  );
}

export default App;


import React from 'react';
import './text.css';
import { useState } from 'react'


const Text = ({text, status}) => {

  let [active, setActive] = useState(status);

  function changeColor() {
    console.log('work');
    setActive(active = !active)
  }

  return (
  <p
    className={active ? 'red-text' : ''}
    onClick={()=>{changeColor()}}
  >
    {text}
  </p>
  );
};

export default Text
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ответы на вопрос 4
TheSnegok
@TheSnegok
У тебя нету обратной логики оно у тебя ставит только в положение false по клику и всё
в функции напиши так:
const resetColor = () => {
status ? setStatus(false) : setStatus(true);

И для change также только используй, и status тебе нужно передавать в компоненту text, и там уже ставить класс на чёрный текст если она true
Ответ написан
@yaroslav1996
function resetColor(params) {
    setStatus(prevStatus => !prevStatus)
}
Ответ написан
Ваш ответ на вопрос

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

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