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

Question

[Alex Krynytskyi]

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

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

Answer 1

[0xD34F]

Храните значения, отвечающие за цвет текста, в родительском компоненте, можно вместе с остальными данными:

const [ items, setItems ] = useState([
  { id: ..., text: '...', active: false },
  { id: ..., text: '...', active: false },
  ...
]);

Тогда сброс этих значений оказывается делом тривиальным:

const reset = () => setItems(items.map(n => ({ ...n, active: false })));

<button onClick={reset}>reset</button>

Ну а переключение значений изнутри экземпляров компонента Text придётся переписать. Сделаем функцию, которая принимает id, и изменяет соответствующий элемент:

const toggle = id => setItems(items.map(n => n.id === id ? { ...n, active: !n.active } : n));

Передадим эту функцию в экземпляры компонента Text:

{items.map(n => <Text key={n.id} {...n} toggle={toggle} />)}

Назначим её в качестве обработчика клика:

const Text = ({ id, text, active, toggle }) => (
  <p
    className={active ? 'active' : ''}
    onClick={() => toggle(id)}
  >
    {text}
  </p>
);

Всё.

Answer 2

[Aleksandr Kritskii]

function resetColor(params) {
    setStatus(!status)
  }

Answer 3

[TheSnegok]

У тебя нету обратной логики оно у тебя ставит только в положение false по клику и всё
в функции напиши так:

const resetColor = () => {
status ? setStatus(false) : setStatus(true);

И для change также только используй, и status тебе нужно передавать в компоненту text, и там уже ставить класс на чёрный текст если она true

Answer 4

[yaroslav1996]

function resetColor(params) {
    setStatus(prevStatus => !prevStatus)
}