CODEWITHSUNDEEP
reactjs
Kingsley
Kingsley

Reputation: 71

How do I change the state of the parent component from the child component in Reactjs?

I am learning Reactjs and started building simple project along the line. So, I have two components: the parent and child components which I will call component A and B. There is a button in component A (parent component) that will make component B (child component) to popup and will make component A to be unclickable with transparent background (0.3).

Inside component B, I wrote a code that will remove the component once a botton is clicked. This button is right there in component B. So, the problem now is that once I click this button to remove the popup, component A will remain unclickable with transparent background of 0.3. How can I change the state of component A from component B since component B is the child of component A? Is this possible or I need to rewrite the code entirely?

Thank you as you help me.

Component A codes:

import React, { useEffect, useState } from 'react';
import "./home.css";
import {dataFile} from "./data";
import Addbirth from "../components/addbirthday"  //this is component B named Addbirth



export default function Home() {
const [showAdd, setShowAdd] = useState(false);


 const handleClick = () =>{
 setShowAdd(!showAdd)
}


 const removeData = (id) =>{
 let showRemainingData = datafile.filter((items) => items.id !== id )

 setdatefile(showRemainingData)

 }

  return (
    
    <>
    
    {showAdd && <Addbirth/> }
  
    <div className="container homeContainer">
        
       <div className={showAdd? "homeWrapper unclickable " :"homeWrapper"  }>
        
         
         <h2 className="headerTitle">You have 5 birthdays today</h2>
         <button className="btn" onClick={ handleClick} >ADD BITHDAY</button> {/* This 
           is the button that calls component B and turns component A with transparent 
            background and unclickable when clicked*/}

component B:

import React, { useState } from 'react';
import "./addbirthday.css";
import "./home.css";



export default function Addbirthday() {
const [closeInput, setCloseInput] = useState(false);

const closeNow = () =>{
    setCloseInput(!closeInput)
}



return (
    <div className="container">
        <div className= { closeInput? "addContainer" :"addWrapper homeWrapper  "}>
            <i className="fas fa-window-close" onClick={closeNow} ></i> {/* This button will 
           close conponent B when clicked. */)

            <div className= "addbirth">
                <label>Name</label>
                <input type="text" placeholder="name"/>
                <label>Choose Birthdate</label>
                <input type="date" />
                <label>Relationship</label>
                <input type="text" placeholder="Friend" />
            </div>
            <button className="addBtn" >Add</button>
        </div>
    </div>
)
}

Thank you as you help me.

Upvotes: 1

Views: 50

Answers (1)

Tyler H
Tyler H

Reputation: 26

I think i understand what you are asking. You just need to pass down the original component to the new Birthday one and have it change back to clickable. In your Return in component A have:

 {showAdd && <Addbirth setShowAdd={setShowAdd} /> }

Then in component B import it as props:

export default function Addbirthday({setShowAdd}) {
const [closeInput, setCloseInput] = useState(false);

const closeNow = () =>{
    setCloseInput(!closeInput);
    setShowAdd(false);
}

Upvotes: 1

Related Questions