How to reset the state of all components with one button?

Question

React

How to write logic correctly so that the reset button makes all texts black again?
When I click on the text, it changes to red, I click again and it changes to black.
And when I press reset, nothing happens.

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

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

Answer 2

You don’t have reverse logic; it only puts you in the false position on click and
write everything in the function like this:

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

And for change also just use it, and you need to pass status to the text component, and there already set the class to black text if it is true

Answer 3

Store the values ​​responsible for the color of the text in the parent component, along with the rest of the data:

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

Then resetting these values ​​turns out to be a trivial matter:

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

<button onClick={reset}>reset</button>
Well, switching values ​​from within instances of the Text component will have to be rewritten. Let's make a function that takes an id and changes the corresponding element:

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

Let's pass this function to instances of the Text component:

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

Let's assign it as a click handler:

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

Everything .

Answer 4

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