Question: > 
> How do it in expression transformation
> 
> 
> 
> > 
> > Flat file  
> > 
> > mm/dd/yyyy
> > 
> > 
> > 
> 
> 
> 

table
yyyy-mm-dd

Answer: 
If your question is why the `visible` and `isVisible` are different, that is because the useState runs only the first time the React component is rendered. (Until it is unmounted and mounted again).

If you want to track the change to any variable every time it changes, use the useEffect hook, as in:

```
useEffect(() => {
    setVisible(isVisible);
  }, [isVisible]);

```

In your case, you can just delete the
`const [visible, setVisible] = useState(isVisible);` line and use your parent's isVisible in your display:

```
display: `${isVisible ? "block" : "none"}`

```

or not even render the div at all with the && operator.

```
return (
    isVisible &&
    <div
      style={{
        widht: "50px",
        height: "50px",
        backgroundColor: "red"
      }}
    ></div>
  );

```
When you render `ColorBox` `isVisible` is **false** which also makes `visible` **false** as well. But when you click, it doesn't call `setVisible`. So `visible` is still **false**, but the click did call `setIsVisible` which turned `isVisible` to **true**.