Reset functional child components from parent-CodePudding

I need to rerender the components GridSquare from component GridPixels. When the users clicks the button "Reset Colors" the component should reset the child components generated by a map.

The flow is:

User clicks "Reset Colors" button. This button is inside GridPixels component.
Gridpixels component should rerender.
The GridSquare component should be reset. This means that his state should be reset. The purpose of this is that inside GridSquare there is a css class called "set-color-red". When resetting the GridSquare component, the state inside GridSquare component should contain "".

All the GridSquare components are rerendered but the state is mantained. I need to reset the state for every GridSquare component from the GridPixels component.

I tried adding one to the index map each time the "Reset Colors" button is clicked but the state is conserved, is not reset.

import { useState } from 'react';
import GridSquare from './GridSquare'

function GridPixels(props) {

    var foo = new Array(192).fill(0);
   
    const [checked, setChecked] = useState(false);
    const toggleChecked = () => setChecked(value => !value);
    
    function reset(){
        toggleChecked() //This is for rerender the GridSquare  component. It doesn't work.
    }
 
    return (


        <div className="grid-container">
            <div className="grid">
                {foo.map((item, index) => {
                    console.log(checked)
                    return <GridSquare key={ index } />
                    })
                }
            </div>

            <div><button onClick={reset}> </button></div>//Reset button Colors
        </div>


    )
}

export default GridPixels

import { useState } from "react";


function GridSquare(props) {

  const [a, setA] = useState("");

 
  const changeStyle = () => {
    if (a === "set-color-red") {
      setA("")
      return
    }

    setA("set-color-red");
  }


  
  


  return <div onClick={changeStyle}  className={a}></div>

}

export default GridSquare

Edit: I was able to do what I asking for with the following javascript code:

function reset(){
        var classesToRemove = document.querySelectorAll(".set-color-red")
        classesToRemove.forEach((item) => {
            item.classList.remove("set-color-red")
        })
    }

I post this to generate a better idea of what I am trying to do.

Edit2: Here is a sandbox of what I am trying to do. There is a grid, and when you click an square, it changes color. There is a reset button, at the right of the grid, to clear all colors from the squares. This is the functionality I can't do.

Sandbox with the code

CodePudding user response：

You can use a key prop on your parent.

The special key prop is used by React to help it understand which components are to be rerendered with prop changes and which should be scrapped and rebuilt.

We run into this most often when mapping over something to build a list.

Pass a callback down to your children that will update the value of key.

See the forked sandbox: https://codesandbox.io/s/react-functional-component-forked-vlxm5

Here are the docs: https://reactjs.org/docs/lists-and-keys.html#keys

const App = (props) => {
  const [key, setKey] = useState(nanoid());
  return (
    <div>
      <GridPixels key={key} reset={() => setKey(nanoid())} />
    </div>
  );
};

// then in your grid component
// ...
<button onClick={props.reset}> Reset Colors</button>