javascript - React.js Problem to sent props and event from parent to child

Question

I start learning in React.js now. But I have some problem to sent props and event from parent to child In this workshop I want to click "Turn on All" and "Turn Off All" from parent and effect to child I can do this but in child have problem to set own state to turn on or off How can I set in child to do that ?

This is my code

App.js

import React,{useState} from 'react'
import './App.css'
import Lightbox from "./Lightbox"

function App() {

  const [OnOff, setOnOff] = useState(true)

  return (
    <div className="container">
      <div className="row mt-4 mb-4">
        <div className="col-md-12 text-center">
          <button onClick={()=>setOnOff(true)}>Turn On All</button> &nbsp;&nbsp;
          <button onClick={()=>setOnOff(false)}>Turn Off All</button>
        </div>
      </div>
      <div className="row">
        <Lightbox status={OnOff} />
        <Lightbox status={OnOff} />
        <Lightbox status={OnOff} />
        <Lightbox status={OnOff} />
        <Lightbox status={OnOff} />        
      </div>
    </div>
  );
}

export default App;

Lightbox.js

import React,{useState, useEffect } from 'react'

function Lightbox({status}) {

    const [data, setdata] = useState(true)
    const toggleHandler = () => setdata(!data)

    useEffect(() => {
        setdata(status)
    })

    return (
        
        <div className={`card col-md-2 m-2 p-3 ${data?'bg-warning':'bg-dark'}`}>
            {data?<div className="text-center mb-3 text-white">Light On</div>:<div className="text-center mb-3 text-white">Light Off</div>}
            <button onClick={toggleHandler}>{data?"OFF":"ON"}</button>
        </div>

    )
}

export default Lightbox

Thank for help

Screen shot

https://i.stack.imgur.com/wp5Xb.jpg

https://i.stack.imgur.com/DcMxL.jpg

Answer 1

try to mutate the state of children properly. Like this

const toggleHandler = () => setdata(data => !data )