How to pass Children component state to Parent component state in React using Hooks

Question

I am working on a React project, for design I am using Ant design.

In the parent component App in App.js there are two buttons: Show Child's First Button and Show Child's Second Button. There is also a Child component imported from Child.js.

Now what I am trying to do: when I click Show Child's Second Button I have to show customizedDataRefundAmount div and I have to hide customizedDataTotalAmount div. To achieve this I need to pass child's state to the parent component, so please help me to resolve this issue.

This is my code App.js

import React from "react";
import { Button } from 'antd';
import Child from "./Child/Child";
import 'antd/dist/antd.css';
import "./App.css";


const App = () => {
  return (
    <div>
      <Button type="primary">Show Child's First Button</Button>
      <Button type="danger" style={{marginLeft: "10px"}}>Show Child's Second Button</Button>
      <Child></Child>
    </div>
  )
}

export default App

This is Child.js

import React, { useState } from "react";
import { Button } from "antd"
import "./Child.css";

const Child = () => {
    const [showTotalAmount, setShowTotalAmount] = useState(true)

    const [hideRefundAmount, setHideRefundAmount] = useState(false)
    return (
        <div style={{display: "flex"}}>
            {showTotalAmount &&
            <div className="customizedDataTotalAmount">
                <h3 className="dueAmount">
                    Total Due Amount
                </h3>
                <h3 className="dueAmountCost">$150</h3>
            </div>
}
            {hideRefundAmount &&
            <div className="customizedDataRefundAmount" style={{marginLeft: "90px"}}>
                <h3 className="refundAmount">
                    Total Refund Amount
                </h3>
                <h3 className="refundAmountCost">$100</h3>
            </div>
}
        </div>
    )
}

export default Child

without knowing the details of the complete project, it would be easiest to just add the buttons to the child in the section they are needed. No other logic needed than what is already there. — RST, Jul 20 '21 at 10:41

score 0 · Answer 1 · answered Jul 20 '21 at 11:36

You can simply handle the amount visibility flag from the parent component and then pass your boolean value on the buttons by onClick. In the child component, I used the ternary operator to show the correct amount according your description. codesandbox

Parent

export default function App() {
  const [showTotalAmount, setShowTotalAmount] = useState(true);

  return (
    <div>
      <Button type="primary" onClick={() => setShowTotalAmount(true)}>
        Show Child's First Button
      </Button>
      <Button
        type="danger"
        onClick={() => setShowTotalAmount(false)}
        style={{ marginLeft: "10px" }}
      >
        Show Child's Second Button
      </Button>
      <Child showTotalAmount={showTotalAmount} />
    </div>
  );
}

Child

import React from "react";
import "./Child.css";

const Child = (props) => {
  const { showTotalAmount } = props;

  return (
    <div style={{ display: "flex" }}>
      {showTotalAmount ? (
        <div className="customizedDataTotalAmount">
          <h3 className="dueAmount">Total Due Amount</h3>
          <h3 className="dueAmountCost">$150</h3>
        </div>
      ) : (
        <div
          className="customizedDataRefundAmount"
          style={{ marginLeft: "90px" }}
        >
          <h3 className="refundAmount">Total Refund Amount</h3>
          <h3 className="refundAmountCost">$100</h3>
        </div>
      )}
    </div>
  );
};

export default Child;

How to pass Children component state to Parent component state in React using Hooks

1 Answers1