CODEWITHSUNDEEP
javascriptreactjs
Samit Koyom
Samit Koyom

Reputation: 1

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

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.sstatic.net/wp5Xb.jpg

https://i.sstatic.net/DcMxL.jpg

Upvotes: 0

Views: 69

Answers (3)

Mohammad Faisal
Mohammad Faisal

Reputation: 2363

you have issues with the useEffect.

import React, { useState, useEffect } from "react";

function Lightbox({ status }) {
  const [data, setdata] = useState(true);

  const toggleHandler = () => {
    setdata((data) => !data);
  };

  useEffect(() => {
    setdata(status);
  }, [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;

Upvotes: 1

Moataz Alsayed
Moataz Alsayed

Reputation: 381

{data?"OFF":"ON"}

In this part, you return the value but you don't set anything. You can use

{data?setData("OFF"): setDate("ON");}

to set the values.

Also, you should add the change in props within the "useEffect" hook.

Upvotes: 0

Samit Koyom
Samit Koyom

Reputation: 1

@Mohammad Faisal

Not working on child

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

function Lightbox({status}) {

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

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

    return (
        
        <div className={`card col-md-2 m-2 p-3 ${status?'bg-warning':'bg-dark'}`}>
            {status?<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}>{status?"OFF":"ON"}</button>
        </div>

    )
}

export default Lightbox

Upvotes: 0

Related Questions